2016-09-07 4 views
1

У меня есть список объектов, как этотудлинить компоненты меняют обнаружение в Angular2

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` 
    } 
} 

Это в основном имеет некоторые URLs, и может предоставить имена, найденные на этих 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 [list]="somelist" [hash]="somelist.hash()"></lister> 

, но это, кажется, делают ненужным комплекс для вызывающего абонента.

Я предпочел бы, чтобы кто-нибудь заставил самого Листера «послушать» его изменения в списках.

Есть ли способ достичь этого?

ответ

1

Хорошо, это явный случай RTFM: ответ ngDoCheck, который вызывается каждый раз, когда выполняется обнаружение изменений.

Смежные вопросы