Question

我正在使用一个observable将一个列表从服务返回到我的组件，在我的组件中我使用的是ChangeDetectionStrategy.OnPush，在模板中我正在使用异步管道，希望这会带来一些性能上的好处，因为不会执行Change Detection所有的时间，但只有当新的内容可用时。

以下是我的服务：

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中包装list update，它会触发视图更新

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

我刚刚开始探索Observables，有人可以指导上面的代码有什么问题吗？

Answer 1

只需将代码ngOnInit()移动到构造函数即可。 Angular尝试在调用ngOnInit()之前解析绑定（订阅observable）并因thod._list$为null而失败，因为它无法识别更改。 / p>

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

1 个答案: