Trong một trong những dự án cuối cùng, tôi cần một thành phần có thể tái sử dụng được chia sẻ, thành phần này cần được mở rộng với nội dung hoặc chức năng bổ sung bởi chế độ xem người sử dụng thành phần này. Trong trường hợp của chúng tôi, nó là một loại thanh menu được sử dụng bởi nhiều chế độ xem. (Chế độ xem, trong trường hợp này, có nghĩa là các mục tiêu định tuyến.)
Việc tạo các thành phần như vậy dễ dàng hơn mong đợi. Dù sao thì tôi cũng đã dành gần cả ngày để tìm ra giải pháp đó, tôi đã chơi với các nhà cung cấp chế độ xem và mẫu, cố gắng truy cập vào mẫu và thao tác với mẫu. Tôi cũng đã cố gắng tạo một chỉ thị cấu trúc của riêng mình.
Nhưng bạn chỉ cần sử dụng chỉ thị trong thành phần vùng chứa.
<nav>
<div class="navigation pull-left">
<ul>
<!-- the menu items --->
</ul>
</div>
<div class="pull-right">
<ng-content></ng-content>
</div>
</navĐó là tất cả. Bạn không cần phải viết bất kỳ mã TypeScript nào để làm việc này. Sử dụng thành phần này bây giờ khá trực quan:
<div class="nav-bar">
<app-navigation>
<button (click)="printDraft($event)">print draft</button>
<button (click)="openPreview($event)">Show preview</button>
</app-navigation>
</div>Nội dung của - các nút - bây giờ sẽ được đặt vào trình giữ chỗ.
Sau khi dành gần cả ngày để làm việc này, câu hỏi đầu tiên của tôi là: Nó có thực sự dễ dàng như vậy không? Vâng, đúng vậy. Đó là tất cả.
Có thể bạn đã biết về nó. Nhưng tôi không thể tìm thấy bất kỳ gợi ý nào trong tài liệu, trên StackOverflow hoặc trong bất kỳ Blog nào về nó. Có thể yêu cầu này không được sử dụng thường xuyên. Ít nhất tôi đã tình cờ tìm thấy một tài liệu mà ng-content được sử dụng và tôi quyết định viết về nó. Hy vọng nó sẽ giúp ích cho người khác.
