Question

假设我们有一个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 {
}

Answer 1

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

共享服务

import {EventEmitter} from 'angular2/core';

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

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

子组件实现（例如cat one）

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。

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

有关详细信息，请参阅此问题：

Delegation: EventEmitter or Observable in Angular2

Answer 2

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

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

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

2 个答案: