Angular（v2）扩展系列组件通信（无父服务或外部服务）

Question

我需要一个非常容易理解的解决方案来实现扩展系列（即，Uncle to Nephew，Niece to Aunt，self to cousin）组件/指令之间的通信，而没有共同的父/祖先，外部服务或ngModel。

作为一个例子（虽然代码是压倒性的），Angular Material 2将此示例用于autocomplete：

<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或外部服务;但是，如果我错了，请纠正我。

那么如何在上面的例子中拉出这种双向通信？

顺便说一下，这很有帮助，但只是一个单向的例子：passing data between siblings Angular2 using observables

Answer 1

一种方法是使用@Imput装饰器将父组件的变量绑定到子组件。其他方法是使用@Output装饰器将变量返回到父组件。

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