Truyền dữ liệu từ một Component (@Output)

Chúng ta vừa thấy cách mà component cha truyền dữ liệu tới một nested component bằng cách ràng buộc tới thuộc tính của nested component thông qua @Input decorator. Nếu nested component muốn gửi thông tin trở lại component chứa nó, nó có thể phát ra một sự kiện. Chúng ta có thể sử dụng @Output decorator để đặt bất kỳ thuộc tính nào của nested component khiến chúng có thể truyền một event tới component cha. Dĩ nhiên thuộc tính này phải là một sự kiện. Dữ liệu chúng ta muốn truyền sẽ được gửi kèm event này.

Trong Angular một event thì được định nghĩa với một đối tượng EventEmitter. Ở đây chúng ta sẽ tạo ra một thể hiện mới của EventEmitter. Hãy chú ý cú pháp ở start.component.ts , Chúng ta vừa khai báo cho Star Component một sự kiện, sự kiện này khi phát ra sẽ truyền cùng với data là kiểu string.

Hàm onClick sẽ phát ra sự kiện notify và gắn vào sự kiện này một dữ liệu kiểu chuỗi có giá trị “clicked”.

Để lắng nghe sự kiện này trên component cha, chúng ta sử dụng dấu ngoặc đơn (notify) và gán vào cho nó một hàm để lắng nghe sự kiện này.