Thử Nghiệm Với Angular: Content Projection Trong Angular

691

Content Projection Trong Angular

Làm thế nào để sử dụng lại các component trong Angular 2+, hay làm sao để có thể nhúng content của một component cho một component khác. Bài học này sẽ giới thiệu cho các bạn về Content Projection trong Angular sử dụng ng-content directive.

1. Nhúng một phần content vào một component

1.1 ng-content directive:

Chúng ta sẽ nhúng ng-content directive vào phần component template mà chúng ta mong muốn content sẽ được nhúng vào.

card.component.html

card.component.ts

Khi ở trong Component khác mà chúng ta muốn nhúng template vào phần đã định nghĩa của Component cho phép nhúng thì chúng ta có thể làm như sau.

Đăng kí tại đây để gia nhập hệ sinh thái IoT ngay bây giờ!

app.component.html

1.2 Sử dụng selector:

Khi bạn sử dụng selector, tất cả các selector nào thỏa mãn sẽ được nhúng vào đúng vị trí đã chọn, dù có nhúng vào nhiều hơn một lần.

– Tag selector:

card.component.html

– Class selector:

card.component.html

– Attribute selector:

card.component.html

– Sử dụng nhiều selector:

card.component.html

Template từ Component muốn nhúng vào.

app.component.html

card.component.html

<div class=“tp-card”>

  <ng-content select=“footer[data-footer=cool-footer]”></ng-content>

</div>

Template từ Component muốn nhúng vào.

app.component.html

2. Nhúng nhiều phần content vào một component

Việc nhúng nhiều phần content hoàn toàn được phép, bạn có thể nhúng nhiều phần khác nhau ví dụ như:

card.component.html

Lưu ý: thứ tự đặt của ng-content sẽ có tác động đến thứ tự truyền vào từ Component khác, nếu Component khác truyền Template vào với thứ tự khác, thì thứ tự hiển thị sẽ tuân theo thứ tự của Component khai báo ng-content.

Ví dụ như bạn nhúng content như sau:

app.component.html

3. Video bài học

Techtalk via tiepphan

CHIA SẺ