Thử Nghiệm Với Angular Phần 12: Content Projection Trong Angular

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

<div class="tp-card">
  <ng-content></ng-content>
</div>

card.component.ts

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

@Component({
  selector: 'tp-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class CardComponent { }

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.

app.component.html

<tp-card>
  <header class="tp-card__title">Title</header>
  <div class="tp-card__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, molestiae.
  </div>
  <footer class="tp-card__footer"> 
    <button class="tp-button btn btn-danger">Action</button> 
  </footer>
</tp-card>

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

div class="tp-card">
  <ng-content select="header"></ng-content>
</div>

– Class selector:

card.component.html

<div class="tp-card">
  <ng-content select=".tp-card__content"></ng-content>
</div>

– Attribute selector:

card.component.html

<div class="tp-card">
  <ng-content select="[data-footer=cool-footer]"></ng-content>
</div>

– Sử dụng nhiều selector:

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

<tp-card>
  <header class="tp-card__title">Title</header>
  <div class="tp-card__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, molestiae.
  </div>
  <footer class="tp-card__footer" data-footer="cool-footer"> 
    <button class="tp-button btn btn-danger">Action</button> 
  </footer>
</tp-card>

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

<div class="tp-card">
 <ng-content select="header"></ng-content>
 <ng-content select=".tp-card__content"></ng-content>
 <ng-content select="footer"></ng-content>
</div>

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

<tp-card>
  <header class="tp-card__title">Title</header>
  <footer class="tp-card__footer" data-footer="cool-footer"> 
    <button class="tp-button btn btn-danger">Action</button> 
  </footer>
  <div class="tp-card__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, molestiae.
  </div>
</tp-card>

3. Video bài học

4. Tham khảo

Code repo: https://github.com/tieppt/try-angular/tree/lesson-12