Helpex - Trao đổi & giúp đỡ Đăng nhập

Tạo thành phần vùng chứa trong Angular 2 [Đoạn mã]

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.

3 hữu ích 0 bình luận 7.3k xem chia sẻ

Có thể bạn quan tâm

loading