如何在 Angular 中使用輸出裝飾器

在 Angular 中，一個網頁可以包含許多不同的可重用組件。每個組件通常包含自己的 TypeScript 邏輯、HTML 模板和 CSS 樣式。

您還可以在其他組件內重用組件。在這種情況下，您可以使用輸出裝飾器將信息從子組件發送回其父組件。

您還可以使用輸出裝飾器來監聽子組件中發生的事件。

如何將輸出裝飾器添加到子組件

首先，您需要創建一個具有父組件和子組件的新 Angular 應用程序。

一旦有了父子組件，就可以使用 Output 裝飾器在兩個組件之間傳輸數據和監聽事件。

1. 創建一個新的 Angular 應用程序。默認情況下，“app”是根組件的名稱。該組件包括三個主要文件：“app.component.html”、“app.component.css”和“app.component.ts”。
2. 對於這個例子，“app”組件將充當父組件。用以下內容替換“app.component.html”中的所有內容： <div class="parent-component">
  <h1> This is the parent component </h1>
</div>
3. 在“app.component.css”中為父應用組件添加一些樣式： .parent-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightcoral;
  padding: 20px
}
4. 使用“ng generate component”命令創建一個名為“data-component”的新 Angular 組件。在此示例中，“data-component”將代表子組件。 ng g c data-component
5. 在“data-component.component.html”中為子組件添加內容。替換當前內容以添加新按鈕。將按鈕綁定到用戶單擊它時將運行的函數： <div class="child-component">
  <p> This is the child component </p>
  <button (click)="onButtonClick()">Click me</button>
</div>
6. 在“data-component.component.css”中為子組件添加一些樣式： .child-component {
  font-family: Arial, Helvetica, sans-serif;
  background-color: lightblue;
  margin: 20px;
  padding: 20px
}
7. 將 onButtonClick() 函數添加到組件的 TypeScript 文件中，位於“data-component.component.ts”中： onButtonClick() {
}
8. 仍然在 TypeScript 文件中，將“Output”和“EventEmitter”添加到導入列表中： import { Component, Output, EventEmitter, OnInit } from '@angular/core';
9. 在 DataComponentComponent 類中，為名為“buttonWasClicked”的組件聲明一個輸出變量。這將是一個 EventEmitter。EventEmitter 是一個內置類，允許您在事件發生時通知另一個組件。 export class DataComponentComponent implements OnInit {
  @Output() buttonWasClicked = new EventEmitter<void>();
  //. ..
}
10. 在 onButtonClick() 函數中使用“buttonWasClicked”事件發射器。當用戶單擊按鈕時，數據組件會將此事件發送到父應用程序組件。 onButtonClick() {
    this.buttonWasClicked.emit();
}

如何從父組件監聽子組件中的事件

要使用子組件的 Output 屬性，您需要監聽父組件發出的事件。

1. 使用“app.component.html”中的子組件。您可以在創建 HTML 標記時將“buttonWasClicked”輸出添加為屬性。將事件綁定到新函數。 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
2. 在“app.component.ts”中，添加新函數來處理子組件中發生的按鈕單擊事件。當用戶點擊按鈕時創建一條消息。 message: string = ""


   buttonInChildComponentWasClicked() {
    this.message = 'The button in the child component was clicked';
}

3. 在“app.component.html”中顯示消息： <p>{{message}}</p>
4. 在終端中輸入“ng serve”命令來運行你的 Angular 應用程序。在 localhost:4200 的 Web 瀏覽器中打開它。父子組件使用不同的背景顏色，以便更容易區分它們。
   
5. 單擊“單擊我”按鈕。子組件將事件發送到父組件，父組件將顯示消息。
   

如何將數據從子組件發送到父組件

您還可以將數據從子組件發送到父組件。

1. 在“data-component.component.ts”中，添加一個變量來存儲包含一些數據的字符串列表。 listOfPeople: string[] = ['Joey', 'John', 'James'];
2. 修改 buttonWasClicked 事件發射器的返回類型。將它從 void 更改為 string[]，以匹配您在上一步中聲明的字符串列表： @Output() buttonWasClicked = new EventEmitter<string[]>();
3. 修改 onButtonClick() 函數。向父組件發送事件時，將數據作為參數添加到 emit() 函數中： onButtonClick() {
    this.buttonWasClicked.emit(this.listOfPeople);
}
4. 在“app.component.html”中，修改“app-data-component”標籤。將“$event”添加到 buttonInChildComponentWasClicked() 函數中。這包含從子組件發送的數據。 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
5. 更新“app.component.ts”中的函數以添加數據參數： buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
}
6. 添加一個名為“data”的新變量來存儲來自子組件的數據： message: string = ""
data: string[] = []


   buttonInChildComponentWasClicked(dataFromChild: string[]) {
    this.message = 'The button in the child component was clicked';
    this.data = dataFromChild;
}

7. 在 HTML 頁面上顯示數據： <p>{{data.join(', ')}}</p>
8. 在終端中輸入“ng serve”命令來運行你的 Angular 應用程序。在 localhost:4200 的 Web 瀏覽器中打開它。
   
9. 單擊“單擊我”按鈕。子組件會將數據從子組件發送到父組件。
   

使用輸出裝飾器將數據發送到其他組件

您可以在 Angular 中使用其他裝飾器，例如輸入裝飾器或組件裝飾器。您可以詳細了解如何使用 Angular 中的其他裝飾器來簡化代碼。