angular2中，如何让子组件相互通信？

Posted 2023-03-13

【中文标题】angular2中，如何让子组件相互通信？

【英文标题】：In angular2, how to let child components communicate with each other?

【发布时间】：2016-06-04 07:19:54

【问题描述】：

假设我们有一个Parent组件（里面有一个继承自Cat和Dog的Animal类）和两个子组件（Cat和Dog），cat和dog按钮总是处于相反的状态，点击cat按钮可以禁用狗按钮，点击狗按钮可以禁用猫按钮。如何实现？

@Component
...,
template: `<cat></cat>
           <dog></dog>`
class ParentComponent 


export class Animal 


@Component
...
class Cat extends Animal 


@Component Dog extends Animal 

【参考方案1】：

您可以使用包含EventEmitter 类型属性的共享服务。这样您就可以触发一个事件，并且所有订阅该事件的元素（组件）都会收到通知。

共享服务

import EventEmitter from 'angular2/core';

export class SharedService 
  constructor() 
    this.selected = new EventEmitter();
  

  select(elt) 
    this.selected.emit(elt);
  

子组件实现（例如猫一）

import Component from 'angular2/core';
import SharedService from './app.service';

@Component(
    selector: 'cat',
    template: `
      <div (click)="select()">Cat disabled</div>
    `
)
export class CatComponent 
  constructor(private service:SharedService) 
    this.disabled = false;
    service.selected.subscribe((elt) => 
      if (elt==='cat') 
        this.disabled = false;
       else 
        this.disabled = true;
      
    );
  

  select() 
    this.service.select('cat');
  

这是您的用例的示例实现：https://plnkr.co/edit/U7vflPDOUgAG3UCFZG3n?p=preview。

不要忘记在引导级别注册对应的提供程序以共享同一个实例。

查看这个问题了解更多详情：

Delegation: EventEmitter or Observable in Angular2

【讨论】：

非常感谢@Thierry Templier。但我有一个关于它是如何工作的问题？我对你的代码的理解是这样的：当点击狗时，它发送'狗'的信息，然后它自己听？在我看来，Dog 类中的以下代码更有意义： constructor(private service:SharedService) this.disabled = true; service.selected.subscribe((elt) => if (elt==='dog') this.disabled = true; else this.disabled = false; ); select() this.service.select('cat'); .

在上述Dog类代码中，我修改了部分代码：if(elt==='dog'), this.service.select('cat');

不客气！ cat 和 dog 组件都会监​​听该事件，因此它们会相应地更新其 disable 属性...

谢谢@Thierry Templier。我找到你了。

【参考方案2】：

这取决于。如果父组件需要知道何时点击了猫按钮和狗按钮，我会在子组件上指定输入和输出属性。 emit() 发生单击事件时输出属性上的事件通知父级，然后父级可以修改绑定到另一个组件的输入属性的父属性。

如果父母不需要知道发生了什么，那么您可以使用共享服务，就像 @Thierry 刚才提到的那样。

【讨论】：

是的，完全正确。就我而言，父母不需要知道任何事情。