“异步”管道不呈现流更新

Question

尝试使用 async 管道通过角度 2 组件中的流在窗口调整大小时呈现窗口大小：

<h2>Size: {{size$ | async | json}}</h2>

const windowSize$ = new BehaviorSubject(getWindowSize());
Observable.fromEvent(window, 'resize')
  .map(getWindowSize)
  .subscribe(windowSize$);

function getWindowSize() {
  return {
    height: window.innerHeight,
    width: window.innerWidth
  };
}

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Size: {{size$ | async | json}}</h2>
    </div>
  `,
  directives: []
})
export class App {
  size$ = windowSize$.do(o => console.log('size:', o));
  constructor() {  }
}

但是组件只渲染初始状态而忽略流更新。 如果您打开控制台，在调整窗口大小时，您将看到来自同一流的更新。

无法理解我在这里缺少什么。

这是plunker

Answer 1

@Marks 解决方案对我不起作用，起作用的方法类似于以下 hack：

size$ = windowSize$.do(o => {
     console.log('size:', o);
     // since the resize event was not registered while inside the Angular zone,
     // we need to manually run change detection so that the view will update
     setTimeout(()=>this._cdr.detectChanges())
});  

但后来我真的想到了 Mark 的注释“事件处理程序在 Angular 区域之外运行”，并意识到在我的用例中，我使用的是 javascript 的 firestore 而不是 angular 的 firestore，这使得在 diffrenet 事件处理程序上可以观察到快照更改。切换回 angular 的 firestore 后 - 它起作用了！

Answer 2

因为我的目标是能够在不同的模块中抽象窗口大小的流，显然只是将流包装在一个类中就可以了：

“这就是未来”版本：

import {Observable, BehaviorSubject} from 'rxjs';  

export class WindowSize {
  width$: Observable<number>;
  height$: Observable<number>;

  constructor() {
    let windowSize$ = createWindowSize$();
    this.width$ = (windowSize$.pluck('width') as Observable<number>).distinctUntilChanged();
    this.height$ = (windowSize$.pluck('height') as Observable<number>).distinctUntilChanged();
  }
}

const createWindowSize$ = () =>
  Observable.fromEvent(window, 'resize')
    .map(getWindowSize)
    .startWith(getWindowSize())
    .publishReplay(1)
    .refCount();

const getWindowSize = () => {
  return {
    height: window.innerHeight,
    width: window.innerWidth
  }
};

“奶奶”版：

import {Observable, BehaviorSubject} from 'rxjs';

export class WindowSize {
    width$: Observable<number>;
    height$: Observable<number>;

    constructor() {
        let windowSize$ = new BehaviorSubject(getWindowSize());
        this.width$ = (windowSize$.pluck('width') as Observable<number>).distinctUntilChanged();
        this.height$ = (windowSize$.pluck('height') as Observable<number>).distinctUntilChanged();

        Observable.fromEvent(window, 'resize')
            .map(getWindowSize)
            .subscribe(windowSize$);
    }
}

function getWindowSize() {
    return {
        height: window.innerHeight,
        width: window.innerWidth
    };
}

虽然我不想在这个模块中使用类/服务，只需要清晰/独立于平台的构造，但这是唯一适用于 Angular 而无需关心触发区域更新的简洁方式。

Answer 3

事件处理程序在 Angular 区域之外运行，因此事件触发时不会运行 Angular 更改检测。将事件处理程序放在您的组件中，然后它将与所有其他异步事件一起进行猴子修补，因此 Angular 更改检测将在每个事件之后执行（并更新视图）：

ngOnInit() {
    Observable.fromEvent(window, 'resize')
     .map(getWindowSize)
     .subscribe(windowSize$);
}

Plunker

---

在 cmets 中讨论的另一个选项是在更新视图模型时发送manually run change detection：

import {Component, ChangeDetectorRef} from 'angular2/core'
...
export class App {
  size$ = windowSize$.do(o => {
     console.log('size:', o);
     // since the resize event was not registered while inside the Angular zone,
     // we need to manually run change detection so that the view will update
     this._cdr.detectChanges();
  });

  constructor(private _cdr: ChangeDetectorRef) {}
}

Plunker

请注意，您可能希望尝试运行一次ApplicationRef.tick()，例如在根组件中，这将对所有组件运行更改检测——而不是在每个组件中运行ChangeDetectorRef.detectChanges()。 （并且您可能需要将tick() 包装在setTimeout() 方法中，以确保所有组件视图模型都已更新...我不确定何时会执行所有do() 回调方法-即，如果它们都在 JavaScript VM 的一个回合中运行，或者如果涉及多个回合。）