Ai đó có thể vui lòng minh họa sự khác biệt giữa việc sử dụng <ng-container>và <ng-template>các phần tử?
Tôi không thể tìm thấy tài liệu cho NgContainervà không hiểu rõ sự khác biệt giữa thẻ mẫu.
Một ví dụ mã của mỗi mã sẽ giúp ích rất nhiều.
Câu trả lời:
Cả hai đều hiện tại (2.x, 4.x) được sử dụng để nhóm các phần tử lại với nhau mà không cần phải giới thiệu một phần tử khác sẽ được hiển thị trên trang (chẳng hạn như divhoặc span).
template, tuy nhiên, yêu cầu cú pháp khó hiểu. Ví dụ,
<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>
sẽ trở thành
<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<li>...</li>
</template>
Bạn có thể sử dụng ng-containerthay thế vì nó tuân theo *cú pháp tuyệt vời mà bạn mong đợi và có thể đã quen thuộc.
<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
<li>...</li>
</ng-container>
Bạn có thể tìm thêm thông tin chi tiết bằng cách đọc cuộc thảo luận này trên GitHub .
Lưu ý rằng trong 4.x <template>không được dùng nữa và được thay đổi thành <ng-template>.
Sử dụng
<ng-container>nếu bạn cần một phần tử trợ giúp cho các chỉ thị cấu trúc lồng nhau như *ngIfhoặc *ngForhoặc nếu bạn muốn bọc nhiều hơn một phần tử bên trong một chỉ thị cấu trúc như vậy;<ng-template>nếu bạn cần một cái nhìn "Đoạn" mà bạn muốn đóng dấu ở những nơi khác nhau sử dụng ngForTemplate, ngTemplateOutlethoặc createEmbeddedView().ng-templateđược sử dụng cho chỉ thị cấu trúc như ng-if, ng-forvà ng-switch. Nếu bạn sử dụng nó mà không có chỉ thị cấu trúc, không có gì xảy ra và nó sẽ hiển thị.
ng-containerđược sử dụng khi bạn không có trình bao bọc hoặc vùng chứa mẹ phù hợp. Trong hầu hết các trường hợp, chúng tôi đang sử dụng divhoặc spannhư một vùng chứa nhưng trong những trường hợp như vậy khi chúng tôi muốn sử dụng nhiều chỉ thị cấu trúc. Nhưng chúng ta không thể sử dụng nhiều hơn một chỉ thị cấu trúc trên một phần tử, trong trường hợp đó, ng-containercó thể được sử dụng như một vùng chứa
ng-template
Là <ng-template>một phần tử Angular để hiển thị HTML. Nó không bao giờ được hiển thị trực tiếp. Sử dụng cho các chỉ thị cấu trúc như: ngIf, ngFor, ngSwitch, ..
Ví dụ :
<div *ngIf="hero" class="name">{{hero.name}}</div>
Angular dịch thuộc tính * ngIf thành một <ng-template>phần tử, được bao bọc xung quanh phần tử chủ, như thế này.
<ng-template [ngIf]="hero">
<div class="name">{{hero.name}}</div>
</ng-template>ng-container
Sử dụng như một phần tử phân nhóm khi không có phần tử chủ thích hợp.
Thí dụ:
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<span *ngFor="let h of heroes">
<span *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</span>
</span>
</select>
Điều này sẽ không hoạt động. Bởi vì một số phần tử HTML yêu cầu tất cả các phần tử con trực tiếp phải thuộc một loại cụ thể. Ví dụ, <select>phần tử yêu cầu con. Bạn không thể gói các tùy chọn trong một điều kiện hoặc một <span>.
Thử cái này :
<div>
Pick your favorite hero
(<label><input type="checkbox" checked (change)="showSad = !showSad">show sad</label>)
</div>
<select [(ngModel)]="hero">
<ng-container *ngFor="let h of heroes">
<ng-container *ngIf="showSad || h.emotion !== 'sad'">
<option [ngValue]="h">{{h.name}} ({{h.emotion}})</option>
</ng-container>
</ng-container>
</select>Điều này sẽ hoạt động.
Thông tin thêm: Chỉ thị cấu trúc góc
ng-templatenhư tên của nó, biểu thị một mẫu . Bản thân nó không kết xuất bất cứ thứ gì. Chúng tôi có thể sử dụng a ng-containerđể cung cấp trình giữ chỗ để hiển thị mẫu động .
Một trường hợp sử dụng khác ng-templatelà chúng ta có thể sử dụng nó để lồng nhiều chỉ thị cấu trúc lại với nhau. Bạn có thể tìm thấy các ví dụ tuyệt vời ở đây trong bài đăng blog này: angle ng-template / ng-container
Nói một cách dễ hiểu, ng-containernó giống như một thành phần Cao hơn của React , chỉ hỗ trợ việc hiển thị các phần tử con của nó.
ng-templatevề cơ bản là để triển khai nội bộ Angular , trong đó mọi thứ bên trong ng-templateđều bị bỏ qua hoàn toàn trong khi hiển thị và về cơ bản nó trở thành nhận xét trên nguồn xem. Điều này được cho là được sử dụng với các chỉ thị nội bộ của Angular như ngIf, ngSwitchv.v.
Tôi thích <ng-container>một cách để tách "logic" khỏi "markup" càng nhiều càng tốt trong các tệp Angular .component.html.
(một phần) ví dụ để hiển thị các hàng của bảng html:
<ng-container *ngFor="let product of products">
<tr>
<td></td>
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price }}</td>
<td>{{ product.starRating }}</td>
</tr>
</ng-container>
Bằng cách đó, nếu tôi muốn thay đổi từ HTML <table>sang một cái gì đó khác, chẳng hạn như một loạt <div>với kiểu flexbox, tôi không cần phải "khắc phục" logic lặp (hoặc có nguy cơ mất hoàn toàn) từ bên trong <tr>. Nó cũng giữ cho logic lặp (ngFor) không bị che khuất một phần bởi html bình thường.
@Input()s.*tất nhiên là thuận tiện hơn. Nhưng bạn nói đúng,<ng-container>đã được giới thiệu vì sự khác biệt về cú pháp gây ra khá nhiều nhầm lẫn.