Cách sử dụng Trình trang trí đầu ra trong góc

Độc giả như bạn giúp hỗ trợ MUO. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm.

Trong Angular, một trang web có thể chứa nhiều thành phần có thể tái sử dụng khác nhau. Mỗi thành phần thường chứa logic TypeScript, mẫu HTML và kiểu CSS riêng.

Bạn cũng có thể sử dụng lại các thành phần bên trong các thành phần khác. Trong trường hợp này, bạn có thể sử dụng Trình trang trí đầu ra để gửi thông tin từ thành phần con trở lại thành phần cha của nó.

Bạn cũng có thể sử dụng Trình trang trí đầu ra để lắng nghe các sự kiện xảy ra trong thành phần con.

Cách thêm Trình trang trí đầu ra vào Thành phần con

Trước tiên, bạn sẽ cần tạo một ứng dụng Angular mới với thành phần chính và thành phần con.

Khi bạn có thành phần cha và con, bạn có thể sử dụng Trình trang trí đầu ra để truyền dữ liệu và lắng nghe các sự kiện giữa hai thành phần.

Tạo một cái mới ứng dụng góc . Theo mặc định, 'ứng dụng' là tên của thành phần gốc. Thành phần này bao gồm ba tệp chính: 'app.component.html', 'app.component.css' và 'app.component.ts'.
Đối với ví dụ này, thành phần 'ứng dụng' sẽ đóng vai trò là thành phần chính. Thay thế tất cả nội dung trong 'app.component.html' bằng nội dung sau:
```
 <div class="parent-component"> 
  <h1> This is the parent component </h1> 
</div>
```

Thêm một số kiểu dáng cho thành phần ứng dụng gốc trong 'app.component.css':

 .parent-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightcoral; 
  padding: 20px 
}

Sử dụng lệnh 'ng tạo thành phần' để tạo một thành phần góc mới được gọi là 'thành phần dữ liệu'. Trong ví dụ này, 'data-component' sẽ đại diện cho thành phần con.
```
 ng g c data-component
```
Thêm nội dung vào thành phần con trong 'data-component.component.html'. Thay thế nội dung hiện tại để thêm một nút mới. Liên kết nút với một chức năng sẽ chạy khi người dùng nhấp vào nút đó:
```
 <div class="child-component"> 
  <p> This is the child component </p> 
  <button (click)="onButtonClick()">Click me</button> 
</div>
```

Thêm một số kiểu dáng cho thành phần con trong 'data-component.component.css':

 .child-component { 
  font-family: Arial, Helvetica, sans-serif; 
  background-color: lightblue; 
  margin: 20px; 
  padding: 20px 
}

Thêm hàm onButtonClick() vào tệp TypeScript cho thành phần, trong 'data-component.component.ts':
```
 onButtonClick() { 
}
```
Vẫn bên trong tệp TypeScript, thêm 'Đầu ra' và 'EventEmitter' vào danh sách nhập:
```
 import { Component, Output, EventEmitter, OnInit } from '@angular/core';
```
Bên trong lớp DataComponentComponent, hãy khai báo một biến Đầu ra cho thành phần có tên là 'buttonWasClicked'. Đây sẽ là một EventEmitter. EventEmitter là một lớp tích hợp cho phép bạn thông báo cho một thành phần khác khi một sự kiện xảy ra.
```
 export class DataComponentComponent implements OnInit { 
  @Output() buttonWasClicked = new EventEmitter<void>(); 
  // ... 
}
```
Sử dụng trình phát sự kiện 'buttonWasClicked' bên trong hàm onButtonClick(). Khi người dùng nhấp vào nút, thành phần dữ liệu sẽ gửi sự kiện này đến thành phần ứng dụng mẹ.
```
 onButtonClick() { 
    this.buttonWasClicked.emit(); 
}
```

Cách lắng nghe các sự kiện trong Thành phần con từ Thành phần cha

Để sử dụng thuộc tính Đầu ra của thành phần con, bạn sẽ cần lắng nghe sự kiện được phát ra từ thành phần cha.

Sử dụng thành phần con bên trong 'app.component.html'. Bạn có thể thêm đầu ra 'buttonWasClicked' làm thuộc tính khi tạo thẻ HTML. Liên kết sự kiện với một chức năng mới.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked()"></app-data-component>
```
Bên trong 'app.component.ts', thêm chức năng mới để xử lý sự kiện bấm vào nút khi nó xảy ra trong thành phần con. Tạo thông báo khi người dùng nhấp vào nút.
```
 message: string = "" 
 
buttonInChildComponentWasClicked() { 
    this.message = 'The button in the child component was clicked'; 
}
```
Hiển thị thông báo trong 'app.component.html':
```
 <p>{{message}}</p>
```
Nhập lệnh 'ng serve' vào terminal để chạy ứng dụng Angular của bạn. Mở nó trong trình duyệt web tại localhost:4200. Các thành phần cha và con sử dụng các màu nền khác nhau để dễ phân biệt giữa chúng.
bấm vào Nhấp vào đây cái nút. Thành phần con sẽ gửi sự kiện đến thành phần cha, thành phần này sẽ hiển thị thông báo.

Cách gửi dữ liệu từ thành phần con đến thành phần cha mẹ

Bạn cũng có thể gửi dữ liệu từ thành phần con đến thành phần cha.

Trong 'data-component.component.ts', hãy thêm một biến để lưu trữ danh sách các chuỗi chứa một số dữ liệu.
```
 listOfPeople: string[] = ['Joey', 'John', 'James'];
```
Sửa đổi kiểu trả về của trình phát sự kiện buttonWasClicked. Thay đổi nó từ void thành string[], để khớp với danh sách các chuỗi bạn đã khai báo ở bước trước:
```
 @Output() buttonWasClicked = new EventEmitter<string[]>();
```
Sửa đổi hàm onButtonClick(). Khi gửi sự kiện đến thành phần chính, hãy thêm dữ liệu dưới dạng đối số vào hàm phát ra():
```
 onButtonClick() { 
    this.buttonWasClicked.emit(this.listOfPeople); 
}
```
Trong 'app.component.html', hãy sửa đổi thẻ 'thành phần dữ liệu ứng dụng'. Thêm '$event' vào hàm buttonInChildComponentWasClicked(). Điều này chứa dữ liệu được gửi từ thành phần con.
```
 <app-data-component (buttonWasClicked)="buttonInChildComponentWasClicked($event)"></app-data-component>
```

Cập nhật chức năng trong 'app.component.ts' để thêm tham số cho dữ liệu:

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

Thêm một biến mới gọi là 'dữ liệu' để lưu trữ dữ liệu đến từ thành phần con:

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

Hiển thị dữ liệu trên trang HTML:
```
 <p>{{data.join(', ')}}</p>
```
Nhập lệnh 'ng serve' vào terminal để chạy ứng dụng Angular của bạn. Mở nó trong trình duyệt web tại localhost:4200.
bấm vào Nhấp vào đây cái nút. Thành phần con sẽ gửi dữ liệu từ thành phần con đến thành phần cha.

Gửi dữ liệu đến các thành phần khác bằng Trình trang trí đầu ra

Có những bộ trang trí khác mà bạn có thể sử dụng trong Angular, chẳng hạn như bộ trang trí Đầu vào hoặc bộ trang trí Thành phần. Bạn có thể tìm hiểu thêm về cách bạn có thể sử dụng các trình trang trí khác trong Angular để đơn giản hóa mã của mình.