Question

我有一个List对象，就像这样

class List {
    private urls: string[] = [];

    public getNames(): Observable<string[]> {
       // fetch all `this.urls` and extract the names
    }

    public addUrl(url: string) {
       this.urls.push(url);
    }

    public hash(): string {
       // generate a hash out of `this.urls`
    }
}

它基本上有一些网址，并且可以提供在这些网址上找到的名称

现在我需要一个显示这些名称的组件：

@Component({
    selector: 'lister',
    template: '<p *ngFor="let name of names|async">{{ name }}</p>'
})
class Lister implements OnChanges {

     @Input() list: List;

     private names: Observable<string[]>;

     ngOnChanges() {
         this.names = this.list.getNames();
     }
}

到目前为止一切都那么好，如果我像这样使用它，它会起作用

 <lister [list]="somelist"></lister>

但是在调用somelist.addUrl(...)时它不会刷新，因为它实际上并没有改变任何东西。

解决方法是引入一些更改的内容，如下所示：

class Lister implements OnChanges {
    // ...
    @Input() hash: string;
}

并相应地使用Lister：

 <lister [list]="somelist" [hash]="somelist.hash()"></lister>

但这似乎使调用者不必要复杂。

我宁愿让某些人成为Lister本身＆＃34;倾听＆＃34;它列出了变化。

有没有办法实现这个目标？

Answer 1

好的，这是RTFM的一个明显案例：答案是ngDoCheck，每次运行更改检测时都会调用它。

扩展Angular2中的组件更改检测

1 个答案: