Angular 2 Extended Family 组件通信（无需父级或外部服务）

Question

我需要一个非常易于理解的解决方案来实现组件/指令之间的大家庭（即叔叔到侄子、侄女到阿姨、自己到表弟）通信，而无需共同的父级/祖先、外部服务或

ngModel 

.

作为说明（尽管代码很繁琐），Angular Material 2 使用此示例来实现 自动完成：

<md-input-container>
    <input mdInput placeholder="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
</md-input-container>

<md-autocomplete #auto="mdAutocomplete">
    <md-option *ngFor="let state of filteredStates | async" [value]="state">
      {{ state }}
    </md-option>
</md-autocomplete>

神奇的部分是

[mdAutocomplete]="auto"

指令输入上的

mdInput

，以及

#auto="mdAutocomplete"

组件上几乎反转的

md-autocomplete

。

他们有叔叔到侄子的通信关系，反之亦然，不关心共同的祖先组件，

ngModel

，或我知道的外部服务，但是，请，如果我错了，请纠正我.

那么，如何像上面的示例一样关闭这种类型的双向通信？

顺便说一句，这很有帮助，但只是一个单向示例：使用 observables 在兄弟 Angular2 之间传递数据

Answer 1

一种方法是使用

@Input

装饰器将父组件的变量绑定到子组件。

另一种方法是使用

@Output

装饰器将变量返回给父组件。

@Input() variable:any;
@Output() variableChanged: EventEmitter<any> = new EventEmitter<any>();