如何使用 Angular 8 訪問其他組件的變量

Question

我正在使用 angular，我的 HeaderComponent 中有一個開/關按鈕，我想根據按鈕的值在我的 AboutComponent 中顯示數據

例如：

<div *ngIf="butttonValue === 'on'">Some text</div>
<div *ngIf="butttonValue === 'off'">Some other text</div>

問題是，我不知道如何從我的 AboutComponent 訪問我的變量

我見過一些使用服務，而另一些使用 @input 裝飾器，但我不確定如何使用它們中的任何一個，我希望你們中的一些人能啟發我！

謝謝

Answer 1

1. 創建這樣的服務：

   @Injectable() 導出類 MyService { buttonValue: string; }

2. 將該服務添加到 AppModule 提供商列表中。

3. 在您的兩個組件中，在構造函數中注入 public myService: MyService 。

現在您可以將其稱為 myService.buttonValue。

Answer 2

要在組件之間共享信息，您可以使用以下兩種方法之一 -

• 創建共享服務
• 使用@Input/@Output綁定

@Input() 綁定讓組件從其父組件接收值，而@Output() 讓子組件將數據發送到其父組件。

在您的情況下，您可以按如下方式使用它們 -

• 在Header Component 中的按鈕狀態上創建輸出綁定。 每當它被修改為app 組件時，這將轉移按鈕的值。
• 在About 組件中創建一個輸入綁定，以接收來自 header 組件的按鈕值。

檢查這個演示應用程序，它說明了使用 @Input/@Output 綁定在組件之間傳遞數據。

如需進一步閱讀，請參閱 -組件交互 - Angular 文檔

Answer 3

最好遵循Angular 推薦的組件交互模式。 查看該指南——關於使用輸入綁定傳遞數據的第一部分可能是您想要的。 這是最典型的。

直接從子組件訪問父組件上的數據是一種不好的做法，因為硬編碼對特定調用組件的引用會限制子組件的可重用性。