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.
Content Projection Trong Angular

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

Blog post: http://www.tiepphan.com/thu-nghiem-voi-angular-content-projection-trong-angular/
Code repo: https://github.com/tieppt/try-angular-2/tree/lesson-12

Tiep Phan: 04/03/2017
http://www.tiepphan.com

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Tiep Phan

7 bài viết.
20 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
19 6
Giới thiệu series học Lập trình Angular (Angular 2) Xin chào các bạn, trong thời gian vừa qua cộng đồng Javascript lại đón nhận một đứa con mới đến...
Tiep Phan viết hơn 1 năm trước
19 6
White
12 3
Thử Nghiệm Với Angular – Forms Trong Angular Hầu hết các ứng dụng web hiện đại đều làm việc với forms để thu thập dữ liệu từ người dùng. Angular c...
Tiep Phan viết 1 năm trước
12 3
White
9 6
Tháng 32017, Angular team đã phát hành Angular 4, vậy Angular 4 có gì mới, có những gì thay đổi mà chúng ta cần lưu ý. Bài này sẽ giới thiệu cho cá...
Tiep Phan viết hơn 1 năm trước
9 6
Bài viết liên quan
White
0 3
Các @Input ở component con chỉ khởi tạo giá trị ban đâu, do đó, các biến ở component cha thay đổi thì các @Input ở component con sẽ không thay đổi ...
Vani viết 5 tháng trước
0 3
White
3 0
Hẳn các bạn vẫn còn nhớ trong một số bài trước chúng ta có nói về Observable trong ứng dụng Angular, vậy Observable là gì, nó có quan hệ gì với Ang...
Tiep Phan viết 9 tháng trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
20 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!