动态添加二级子级时，Angular2 @ViewChildren/@ViewQuery 的 QueryList 未更新

Question

我想创建一个目录树，并且无论级别如何都可以访问所有项目，但是当我动态添加二级子级时，@ViewChildren/@ViewQuery 的 QueryList 没有更新:

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);

它在我 addParent() 时更新，但在我 addChild() 时不更新。看起来 QueryList 只订阅了顶级更改。有什么想法可以让它发挥作用吗？

Answer 1

我认为它比使用 @ViewChildren/@ViewQuery 更通用。

事实上，这是 Angular2 处理变化检测的方式。我的意思是对象内的更新不会触发更改检测，但如果您更新整个引用，它就会触发。

因此您需要稍微重构一下您的 removeDynamic 方法:

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();
}

关于 slice 方法的使用，请参阅此答案:

• Populating another array from array - Javascript

以下是 Angular 团队对这种行为的回答:https://github.com/angular/angular/issues/6458 .

希望对你有帮助，蒂埃里