带有 ChangeDetectionStrategy.OnPush 和异步管道的 Angular 2 Observable 不起作用

Question

我使用 observable 将列表从服务返回到我的组件，在我的组件中我使用 ChangeDetectionStrategy.OnPush，在模板中我使用异步管道，希望这会带来一些性能优势，因为没有执行更改检测一直都有，但只有在有新内容可用时。

以下是我的服务：

import { Injectable, Inject, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class ListService {

    public _list$: Subject<any[]>;

    private list: any[] = [];

    constructor() {
        this._list$ = <Subject<any>>new Subject();
    }

    get list$() {
        return this._list$.asObservable();
    }

    loadList() {
        //if this.list is populated through an http call the view is updated, 
        //if its a static list like below, it doesn't trigger view update.
        //this.list = ['Red', 'Green', 'Yellow', 'Blue'];
        this._list$.next(this.list);
    }
}

在我的组件中我有：

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Component({
    templateUrl: `
<ul>
        <li *ngFor="let item of (list$ | async);">
            {{item}}
        </li>
    </ul>
`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListComponent {

    public list$: Observable<any[]>;

    constructor(
        private _ls: ListService
    ) {}

    ngOnInit() {
        this.list$ = this._ls.list$;
        this._ls.loadList();
    }
}

如果 loadList 内容通过 http 调用获取列表内容，则视图会更新，如果列表内容是静态的，则视图不会更新。

如果我将列表更新包装在 setTimeout 中，它会触发视图更新

setTimeout(() => {
    this._list$.next(this.list);
}, 1);

我刚开始探索 Observables，谁能指导一下上面的代码有什么问题？

Answer 1

只需将代码从ngOnInit() 移至构造函数即可。 Angular 在调用 ngOnInit() 之前尝试解析绑定（订阅 observable）并失败，因为 thod._list$ 是 null 并且稍后不会尝试，因为它无法识别更改。