Xây dựng một component lồng nhau (nested component)

Dưới đây là một hình ảnh đại diện cho một component lồng nhau, và một component sẽ chứa nó.

Khi chúng ta xây dựng một ứng dụng tương tác, nested component thường cần giao tiếp với component cha của nó. Nested component nhận thông tin từ cha nó thông qua thuộc tính input và nested component trả ra những thông tin về lại thông tin về cha của nó bằng cách bắn ra các sự kiện.

Trong ứng dụng mẫu mà chúng ta đang xây dựng, chúng ta muốn thay đổi hiển thị của 5 start rating từ những con số thành các ngôi sao. Việc hiển thị số đánh giá bằng cách sử dụng biểu diễn trực quan như các ngôi sao làm cho người dùng giải thích ý nghĩa của các con số nhanh và dễ dàng hơn.

Trước

Sau

Đây là nested component, cái mà chúng ta sẽ xây dựng trong bài học này. Chúng ta sẽ gọi component này là Start Component.

Để Start Component hiển thị chính xác số sao đánh giá, thành phần chưa component này sẽ phải cung cấp rating number tới Start Component thông qua một input. Khi người dùng click lên những ngôi sao, chúng ta muốn phát ra một event để thông báo cho thành phần chứa Start Component biết chúng ta đã thay đổi start rating này. Ngay bây giờ hãy bắt tay vào xây dựng Start Component.

star.component.ts

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

@Component({

selector: 'ai-star',

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

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

})

export class StarComponent implements OnChanges {

rating: 4;

starWidth: number;

ngOnChanges(): void {

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

}

}

star.component.html

<div class="crop"

[style.width.px]="starWidth"

[title]="rating">

<div style="width: 86px">

<span class="glyphicon glyphicon-star"></span>

<span class="glyphicon glyphicon-star"></span>

<span class="glyphicon glyphicon-star"></span>

<span class="glyphicon glyphicon-star"></span>

<span class="glyphicon glyphicon-star"></span>

</div>

</div>