Angular2 @ ViewChildren/@ ViewQuery QueryList wird beim dynamischen Hinzufügen von untergeordneten Ebenen nicht aktualisiert

Question

Ich möchte eine Verzeichnisstruktur erstellen und unabhängig von der Ebene Zugriff auf alle Elemente haben, aber @ ViewChildren/@ ViewQuery QueryList wird nicht aktualisiert, wenn ich dynamisch bin hinzufügen zweite Ebene Kinder:

import {bootstrap} from 'angular2/platform/browser'; 
import {Component, View, QueryList,ViewQuery, Query,ViewChildren} from 'angular2/core'; 


@Component({ 
    selector: 'item', 
}) 
@View({ 
    template: ` 
     <button (click)="addChild()">Add Child</button> 
     <ng-content></ng-content> 
     <div *ngFor="#child of children; #i = index"> 
      <item> {{child.name}}</item> 
     </div> 
    ` 
}) 
export class Item { 
    //public children = [ { name: 'Child 1', age: 22 } ]; 
    public children = []; 
    addChild() { 
     this.children.push({ name: 'Child' + (this.children.length + 1), age: 18 }); 
    } 
} 

@Component({ 
    selector: 'my-app' 
}) 
@View({ 
    directives: [Item], 
    template: ` 
     <button (click)="addParent()">Add Parent</button> 

     <div *ngFor="#user of users; #i = index"> 
      <item #item> {{user.name}}</item> 
     </div> 
` 
}) 
export class AppComponent { 
    public users = [ 
     { name: 'Parent 1', age: 22 } 
    ]; 
    @ViewChildren(Item, {descendants: true}) itemList: QueryList<Item>; 
    constructor() {} 

    ngAfterViewInit() { 
     console.log(this.itemList); 
     this.itemList.changes.subscribe(() => console.log(this.itemList)); 
    } 

    addParent() { 
     this.users.push({ name: 'Parent ' + (this.users.length + 1), age: 18 }); 
    } 
} 

bootstrap(AppComponent); 

Es wird aktualisiert, wenn ich addParent(), aber nicht aktualisiert, wenn ich addChild(). Es sieht so aus, als ob QueryList nur für Änderungen auf oberster Ebene abonniert ist. Irgendwelche Ideen, wie es funktioniert?

Answer 1

Ich denke, dass es etwas allgemeiner als die Verwendung von @ViewChildren/@ViewQuery ist.

In der Tat ist es die Art, wie Angular2 die Änderungserkennung behandelt. Ich meine, Updates innerhalb von Objekten lösen keine Änderungserkennung aus, aber wenn Sie den gesamten Verweis aktualisieren, tut dies auch.

So brauchen Sie ein wenig Ihre removeDynamic Methode Refactoring:

addChild() { 
    this.children.push({ name: 'Child' + (this.children.length + 1), age: 18 }); 
    this.children = this.children.slice(); 
} 

addParent() { 
    this.users.push({ name: 'Parent ' + (this.users.length + 1), age: 18 }); 
    this.users = this.users.slice(); 
} 

Sehen Sie diese Antwort in Bezug auf die Verwendung des slice Methode:

• Populating another array from array - Javascript

Hier ist die Antwort aus dem Angular-Team bezüglich dieses Verhaltens: https://github.com/angular/angular/issues/6458.

Ich hoffe, es hilft Ihnen, Thierry