Angular 2 : contentChildren communication

Question

contentChildren 与其“父级”之间通信的首选方法是什么？

更新: child 可能不是直接 parent ...

给定一个随机的子列表，由一组包裹:

<child-group>
    <div>Some other content, child may not be direct parent...</div>
    <child *ngFor="let item of data$ | async;"></child>
</child-group>

子组件:

@Component({
    selector: 'child',
    template: '<button (click)="didSomethingTellGroup()"></button>',
    styleUrls: ['child.component.scss'],
})
export class ChildComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {

    }

    doSomething() {
        console.log('Called from group component')
    }

    didSomethingTellGroup() {
        //EventEmitter?
        //Observable?
    }

}

父组件:

@Component({
    selector: 'child-group',
    template: '<ng-content></ng-content>',
    styleUrls: ['child-group.component.scss'],
})
export class ChildGroupComponent implements AfterContentInit {
    @ContentChildren(ChildComponent) childrenList: QueryList<ChildComponent>;

    constructor() {
    }

    ngAfterContentInit() {
        //How to invoke doSomething() on all children?
        childrenList...

        //How can I get notification from one or all children, that it did something, or its state has changed.
        childrenList...
    }
}

如何从 ChildGroup 调用子方法？ Child 如何将信息发送回 ChildGroup？

更新:

在下面的评论中，我提到当我尝试调用 children 的方法时，什么也没有发生。事实证明，我需要订阅更改并等待 children ......然后我就可以调用

ngAfterContentInit()
{
    this.childrenList.changes
        .subscribe(list => {
                list.forEach(c => c.doSomething())
            }
        );
}

Answer 1

对于您的 child 到 parent 的场景，@Output 事件发射器是您最好的选择。您的子组件正在将其本身的内部操作(用户单击某处)转换为该组件的任何用户都可以监听的业务相关事件。

至于 parent 调用 child ，你的例子已经差不多了。只需迭代 QueryList 并在子组件上调用您希望的任何方法即可。

ngAfterContentInit() {    
  //How to invoke     doSomething() on all children?  
  this.childrenList.forEach ( c => c.doSomething(); ) 
   ...
}