Truyền dữ liệu tới một Nested Component (@Input)

Nếu một nested component muốn nhận input từ component chứa nó, nó phải cung cấp thuộc tính để làm điều đó. Angular nói rằng, nested component chỉ ra một thuộc tính để nó có thể nhận input từ component chứa đó là “@Input” decorator. Trong ví dụ này, chúng ta muốn rating number truyền vào trong nested component, vì vậy chúng ta đánh đấu thuộc tính này với @Input decorator.

Chúng ta cần lưu ý: để truyền dữ liệu từ template cha (product-list.component.html) chúng ta sử dụng dấu ngoặc vuông và thiết lập dữ liệu nguồn từ dữ liệu của component cha mà chúng ta muốn truyền đến nested component.

rating cũng chính là tên thuộc tính mà chúng ta khai báo trong Start Component, @Input() rating

Trong ví dụ của chúng ta, chúng ta chỉ gắn một thuộc tính cho nested component với @Input decorator nhưng chúng ta không chỉ giới hạn một thuộc tính, chúng ta có thể chỉ định nhiều thuộc tính input khi cần thiết.

star.component.ts

import { Component, OnChanges, Input} from '@angular/core';

@Component({

selector: 'ai-star',

templateUrl: 'app/shared/star.component.html',

styleUrls: ['app/shared/star.component.css']

})

export class StarComponent implements OnChanges {

@Input() rating: 4;

starWidth: number;

ngOnChanges(): void {

this.starWidth = this.rating * 86 / 5;

}

}

Bất cư khi nào dữ liệu trên component chứa Start Component thay đổi, sư kiện lifecycle OnChanges sẽ được tạo ra và chiều rộng của sao sẽ được tính lại, số sao thích hợp sẽ được hiển thị lại. Nhưng nếu chúng ta muốn gửi dữ liệu từ nested component trở lại component cha ? Hãy tiếp tục theo dõi ở bài tiếp theo.