<ng-container> so với <mẫu>

ng-container được đề cập trong tài liệu Angular 2 nhưng không có lời giải thích về cách thức hoạt động và các trường hợp sử dụng.

Nó được đặc biệt đề cập trong ngPluralvà ngSwitchchỉ thị.

Liệu có <ng-container>làm điều tương tự như <template>, hoặc nó phụ thuộc vào việc một lệnh được viết để sử dụng một trong số chúng?

Chúng tôi

<ng-container *ngPluralCase="'=0'">there is nothing</ng-container>

và

<template [ngPluralCase]="'=0'">there is nothing</template>

được cho là giống nhau?

Làm thế nào để chúng ta chọn một trong số họ?

Làm thế nào có thể <ng-container>được sử dụng trong chỉ thị tùy chỉnh?

Chỉnh sửa: Bây giờ nó được ghi lại

<ng-container> để giải cứu

Angular  <ng-container> là một yếu tố nhóm không can thiệp vào kiểu dáng hoặc bố cục vì Angular không đưa nó vào DOM.

(...)

Đây  <ng-container> là một yếu tố cú pháp được công nhận bởi trình phân tích cú pháp Angular. Đây không phải là một lệnh, thành phần, lớp hoặc giao diện. Nó giống như các dấu ngoặc nhọn trong khối if-JavaScript:

  if (someCondition) {
      statement1; 
      statement2;
      statement3;
     }

Nếu không có các dấu ngoặc nhọn đó, JavaScript sẽ chỉ thực thi câu lệnh đầu tiên khi bạn có ý định thực hiện có điều kiện tất cả chúng dưới dạng một khối. Các  <ng-container> đáp ứng một nhu cầu tương tự trong các mẫu kiễu góc.

Câu trả lời gốc:

Theo yêu cầu kéo này :

<ng-container> là một thùng chứa logic có thể được sử dụng để nhóm các nút nhưng không được hiển thị trong cây DOM dưới dạng nút.

<ng-container> được hiển thị dưới dạng một nhận xét HTML.

Vì vậy, mẫu góc này:

<div>
    <ng-container>foo</ng-container>
<div>

sẽ tạo ra loại đầu ra này:

<div>
    <!--template bindings={}-->foo
<div>

Vì vậy, ng-containerrất hữu ích khi bạn muốn có điều kiện nối thêm một nhóm các yếu tố (nghĩa là sử dụng *ngIf="foo") trong ứng dụng của bạn nhưng không muốn bọc chúng bằng một yếu tố khác .

<div>
    <ng-container *ngIf="true">
        <h2>Title</h2>
        <div>Content</div>
    </ng-container>
</div>

sau đó sẽ sản xuất:

<div>
    <h2>Title</h2>
    <div>Content</div>
</div>

Tài liệu ( https://angular.io/guide/template-syntax#!#star-template ) đưa ra ví dụ sau. Giả sử chúng tôi có mã mẫu như thế này:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

Trước khi nó được kết xuất, nó sẽ được "khử đường". Đó là, ký hiệu dấu hoa thị sẽ được phiên âm sang ký hiệu:

<template [ngIf]="currentHero">
  <hero-detail [hero]="currentHero"></hero-detail>
</template>

Nếu 'currentHero' là sự thật, điều này sẽ được hiển thị dưới dạng

<hero-detail> [...] </hero-detail>

Nhưng nếu bạn muốn một đầu ra có điều kiện như thế này:

<h1>Title</h1><br>
<p>text</p>

.. và bạn không muốn đầu ra được bọc trong một thùng chứa.

Bạn có thể viết phiên bản khử đường trực tiếp như vậy:

<template [ngIf]="showContent">
  <h1>Title</h1>
  <p>text</p><br>
</template>

Và điều này sẽ hoạt động tốt. Tuy nhiên, bây giờ chúng tôi cần ngNếu có dấu ngoặc [] thay vì dấu hoa thị * và điều này thật khó hiểu ( https://github.com/angular/angular.io/issues/2303 )

Vì lý do đó, một ký hiệu khác đã được tạo ra, như vậy:

<ng-container *ngIf="showContent"><br>
  <h1>Title</h1><br>
  <p>text</p><br>
</ng-container>

Cả hai phiên bản sẽ tạo ra kết quả giống nhau (chỉ thẻ h1 và p sẽ được hiển thị). Cái thứ hai được ưa thích vì bạn có thể sử dụng * ngNếu như mọi khi.

Các trường hợp sử dụng Imo cho ng-containercác thay thế đơn giản mà mẫu / thành phần tùy chỉnh sẽ quá mức cần thiết. Trong tài liệu API, họ đề cập đến những điều sau đây

sử dụng ng-container để nhóm nhiều nút gốc

và tôi đoán đó là tất cả những gì về nó: nhóm các công cụ.

Xin lưu ý rằng lệnh ng-containernày sẽ biến mất thay vì một mẫu trong đó lệnh của nó bao bọc nội dung thực tế.

Trường hợp sử dụng cho nó khi bạn muốn sử dụng bảng có * ng If và * ngFor - Vì việc đặt div vào td / th sẽ làm cho phần tử bảng bị sai -. Tôi phải đối mặt với vấn đề này và đó là câu trả lời.