6

我正在使用一个 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，谁能指导一下上面的代码有什么问题？

4

1 回答 1

4

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

于 2016-07-02T16:32:45.897 回答