javascript - 在兩個子元件之間共享一個方法（Angular）

有這樣的組件結構：

期望行為

child1_component - 是一個標題。

child2_component - 是一個主體。

child1_component 裡面有一個按鈕。

點擊那個按鈕時，我想調用 child2_component 內的方法。

問題

實現這個的最佳方式是什麼？

答案＃1

一種處理這個問題的方法是使用帶有 rxjs 主題和可觀察對象的服務。

1. 當使用者點擊 child1_component 中的按鈕時，它會呼叫一個方法，而該方法又會呼叫共享服務內的一個方法。

2. 當服務中的方法被調用時，它可以通過一個 Subject 將值作為 Observable 發出。

3. child2_component 然後訂閱共享服務中的可觀察對象，並可以根據從服務接收到資料的時間來執行一些邏輯。

更多關於服務的資訊請見這裡：https://angular.io/tutorial/toh-pt4

關於 subjects 和 rxjs 的絕佳教學：https://blog.angulartraining.com/rxjs-subjects-a-tutorial-4dcce0e9637f

答案＃2

在你的 general.component.html 上：

<app-child1 (clicked)="app1Clicked($event)"></app-child1>

<app-child2 #child2></app-child2>

在你的 general.component.ts 上：

@ViewChild('child2', {static: true}) child2: Child2Component;

app1Clicked($event) {
   this.child2.doSomething()
}

在 child1.components.ts 上：

@Output() clicked = new EventEmitter<any>();

onClick() {
 this.clicked.emit();
}

最後在 child2.component.ts 上：

doSomething() {
 alert('ok');
}