Chia Sẻ Dữ Liệu Giữa Các Component Trong Angular

Bài viết này, mình sẽ tổng hợp có những cách nào để chia sẻ dữ liệu giữa các Component trong Angular, Hiện tại có những cách sau đây:

  1. Sử dụng @Input@Output giữa thành phần cha và con.
  2. Sử dụng ViewChild, ViewContent để truy xuất dữ liệu ban đầu của thành phần con.
  3. Sử dụng BehaviorSubject trong RxJS.

Sử dụng @Input và @Output giữa thành phần cha và con

Ở component con muốn nhận dữ liệu từ component cha, thì ở component con sử dụng decorator @Input, cách sử dụng như sau:

Khi đó, ở component cha ta có thể truyền dữ liệu cho con theo cách bình thường:

Lưu ý: khi sử dụng decorator @Input, ta có thêm lựa con là thiết lập  tham số đầu vào, nó là alias của thuộc tính truyền vào và biến bên trong component con. Cách sử dụng như sau

và lúc này dữ liệu được truyền vào từ cha sẽ viết lại như sau:

Ngược tại, từ component con muốn truyền dữ liệu cho cha, thì ta có thêm khái niệm EventEmitter (Người phát sự kiện), là khi ở con có một sự kiện gì đó làm thay đổi dữ liệu, mà ở cha muốn nhận dữ liệu đó thì con sẽ đẩy dữ liệu này cho cha thông qua sử dụng @OutputEventEmitter ở con (hay còn gọi là tuỳ chỉnh sự kiện). Cách sử dụng như sau:

Sử dụng decorator @Output, để khai báo đầu ra cho component con, với cách khai báo

@Output() messageChanged: EventEmitter<string> = new EventEmitter();

thì ở component cha, khi gọi component con, sẽ theo cấu trúc:

Với,

(messageChanged): là tên @Output đã khai báo trong component con, và trong component cha sẽ khai báo 1 hàm để nhận dữ liệu từ con phát ra (this.messageChanged.emit(‘mono’), cụ thể là phát ra chuỗi “mono” khi click và button ở con.

và dữ liệu được phát ra từ con cho cha là dữ liệu dạng chuỗi (EventEmitter<string>). Trường hợp, muốn phát ra dữ liệu gì thì bạn định nghĩa trong EventEmitter<data-type>.

Cũng giống như sài @Input, thì @Output cũng cho thiết lập alias tham chiếu vào biến,

Ví dụ: ở component con ta khai báo lại

Lúc này, ở component cha ta sử dụng alias (changed) là output để phát ra dữ liệu cho cha

<child-component hello=”truongluu” (changed)=”changeMessage($event)”></child-component>

You May Also Like

About the Author: truongluu

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *