在成角度的兩個同級組件之間通信事件

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));