Truyền dữ liệu vào component con trong Angular

Có thể truyền dữ liệu từ component cha vào component con. Dữ liệu này sẽ được đưa vào các thuộc tính của lớp con. Chúng ta hãy xem cách thực hiện điều này.

Đầu tiên, hãy tạo trong lớp của component con các thuộc tính, vào đó sẽ được nhập dữ liệu từ component cha:

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Bây giờ chúng ta cần khai báo rằng vào những thuộc tính này sẽ có dữ liệu từ bên ngoài được đưa vào. Để làm điều này, một decorator đặc biệt được sử dụng Input. Hãy import nó vào component con của chúng ta:

import { Input } from '@angular/core';

Và bây giờ hãy áp dụng decorator này cho các thuộc tính của chúng ta:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

Hãy thêm việc xuất dữ liệu vào file template của component con:

<p>{{ name }}</p>
<p>{{ age }}</p>

Và bây giờ trong template của component cha, khi gọi thẻ component con, chúng ta sẽ viết các thuộc tính, tên của chúng sẽ trùng với tên của các thuộc tính trong lớp con. Giá trị của các thuộc tính này sẽ được đưa vào các thuộc tính của lớp con:

<user-data name="john" age="25"></user-data>