在成角度的两个同级组件之间通信事件

Question

在我的父html模板中，我有：

<floor (floorCodeChanged)="setSelectedFloorCode($event)"></floor>
 <room></room>

在我的parent.ts文件中，我有一个设置floorCode的函数：

setSelectedFloorCode(floorCode: string) {
    this.floor = floorCode;
 } 

我的地板html模板是：

<mat-form-field>
    <mat-select (selectionChange)="emitChangedFloorCode($event)">
        <mat-option> 1 </mat-option>
        <mat-option> 2 </mat-option>
        ...
    </mat-select>
 </mat-form-field> 

在我的floor.ts文件中，我有：

@Output() floorCodeChanged = new EventEmitter<string>(); 

...

emitChangedFloorCode($event: MatSelectChange) {
    this.floorCodeChanged.emit($event.value);
}

floorCodeChanged发出事件后，我希望我的房间组件调用room.ts文件中的一个函数来对更改执行以下操作：

<floor (floorCodeChanged)="setSelectedFloorCode($event)"></floor>
<room (onFloorCodeChange)="doSomething($event)></room>

我该如何实现？

Answer 1

您可以使用包含Subject的共享服务来做到这一点。

@Injectable()
export class SharedService {
  event$ = new Subject<string>();
}

在组件父模块中提供服务后，可以使用以下命令注入共享服务：

constructor(private sharedService: SharedService) {}

并在组件之间调度事件

emitChangedFloorCode($event: MatSelectChange) {
  this.sharedService.event$.next($event.value);
}

您可以通过订阅主题来收听这些事件

this.sharedService.event$.subscribe(data => console.log(data));