angular - Angular 2:内容 child 交流

在contentChildren及其“父母”之间进行交流的首选方法是什么？

更新：孩子可能不是直接父母...

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

<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调用子方法？子级又如何将信息发送回子组？

更新：

在下面的评论中，我提到当我尝试对子级调用方法时，没有任何反应。好吧，事实证明我需要订阅更改并等待子项...然后我就可以调用

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

最佳答案

前面的答案是完全正确的，使用@Output并循环遍历QueryList是正确的方法，但是，正如您提到的，如果您的孩子不是直系孩子，则可以将服务用作通讯渠道。

这是一个非常基本的示例，它说明了这一点：http://plnkr.co/edit/VuYiz7gVB42PEnnk2d8C（我不是可观察对象的专家，因此也许可以改进）。

基本上，当您单击子组件的按钮时，它将使用：

this.myService.sendToParent(this.random);

通过服务向父母发送消息。在此功能中，服务通过可观察对象向父级发送消息：

this.parentSubject.next(value);

以前，父级订阅了此可观察项：

this.service.getParentMessages().subscribe((data) =>
{
  alert('Something changed from a children: ' + data);

  this.service.sendToChildren(data);
});

如您所见，当它收到一个新值时，它使用功能sendToChildren通过该服务向他的所有孩子发送一条消息（然后应用相同的原理）。当子级收到消息时，它将更改最终显示在组件中的值。

关于angular - Angular 2:内容 child 交流，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42703270/