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

Posted 2023-03-13

【中文标题】Angular (v2) 扩展系列组件通信（无父或外部服务）

【英文标题】：Angular (v2) Extended Family Component Communication (without parent or external service)

【发布时间】：2017-08-15 06:50:44

【问题描述】：

我需要一个非常易于理解的解决方案来实现组件/指令之间的大家庭（即叔叔到侄子、侄女到姑姑、自我到堂兄）之间的通信，而无需共同的父/祖先、外部服务或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>

神奇的部分是mdInput 指令输入上的[mdAutocomplete]="auto"，以及md-autocomplete 组件上实际上倒置的#auto="mdAutocomplete"。

他们有一个叔侄的通信关系，反之亦然，不关心共同的祖先组件ngModel，或我知道的外部服务；但是，如果我错了，请纠正我。

那么我该如何像上面的例子那样取消这种双向通信呢？

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

【参考方案1】：

一种方法是使用@Input装饰器将父组件的变量绑定到子组件。

另一种方式是使用@Output装饰器将变量返回给父组件。

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

【讨论】：

@Roman_C 在很多情况下效果很好，但我需要一些不依赖父母的东西。