Angular2 @ ViewChildren / @ ViewQuery的QueryList时不会更新动态地添加第二个层次的孩子 [英] Angular2 @ViewChildren/@ViewQuery's QueryList not updated when dynamically adding second level children

问题描述

我想打一个目录树，并有机会获得所有项目，无论高低，但@ ViewChildren / @ ViewQuery的QueryList没有更新我的时候动态地添加第二个层次的孩子：

I want to make a directory tree and to have access to all items regardless of the level, but @ViewChildren/@ViewQuery's QueryList is not updated when I dynamically add second level children:

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只认购了顶级的变化。任何想法如何使它工作？

It is updated when I addParent(), but not updated when I addChild(). It looks like QueryList is subscribed only for top level changes. Any ideas how to make it work?

推荐答案

我认为它的东西比使用 @ViewChildren / 更一般@ViewQuery 。

I think that it's something more general than the use of @ViewChildren / @ViewQuery.

在事实上，它是Angular2处理变化检测的方式。我的意思是对象中的更新不会引起变化的检测，但如果你更新整个引用，它的作用。

In fact, it's the way Angular2 handles the change detection. I mean updates within objects don't trigger change detection but if you update the whole reference, it does.

所以，你需要重构了一下你的 removeDynamic 方法：

So you need to refactor a bit your removeDynamic method:

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

请参阅关于使用片这个答案方法：

• Populating从阵列另一个阵列 - 的Javascript

• Populating another array from array - Javascript

下面是关于这种行为的角度队了答案： https://github.com/角/角/问题/ 6458 。

Here is the answer from the Angular team regarding this behavior: https://github.com/angular/angular/issues/6458.

希望它可以帮助你，
蒂埃里

Hope it helps you, Thierry

这篇关于Angular2 @ ViewChildren / @ ViewQuery的QueryList时不会更新动态地添加第二个层次的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！