ng2-ng-containerタグとng-templateタグの違い

誰かが使用の違いを説明できますか <ng-container>とし<ng-template>要素の？

のドキュメントが見つかりませんでした NgContainerず、テンプレートタグの違いがよくわかりません。

それぞれのコード例が大いに役立ちます。

どちらも現時点では（2.x、4.x）、ページにレンダリングされる別の要素（divまたはなどspan）を導入する必要なく、要素をグループ化するために使用されます。

templateただし、厄介な構文が必要です。例えば、

<li *ngFor="let item of items; let i = index; trackBy: trackByFn">...</li>

なるだろう

<template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
  <li>...</li>
</template>

それはあなたが期待し、おそらくすでに慣れてng-containerいる素晴らしい*構文に従っているので代わりに使うことができます。

<ng-container *ngFor="let item of items; let i = index; trackBy: trackByFn">
  <li>...</li>
</ng-container>

詳細については、GitHubのこのディスカッションをご覧ください。

4.xでは<template>非推奨であり、に変更されてい<ng-template>ます。

使用する

• <ng-container>のようなネストされた構造ディレクティブのヘルパー要素が必要な*ngIf場合、*ngForまたはそのような構造ディレクティブ内に複数の要素をラップする場合。
• <ng-template>ビューが必要な場合は、使用して、さまざまな場所でスタンプしたいことを「スニペット」ngForTemplate、ngTemplateOutletまたはcreateEmbeddedView()。

ng-template以下のような構造的な指示のために使用されng-if、ng-forそしてng-switch。構造ディレクティブなしで使用すると、何も起こらず、レンダリングされます。

ng-container適切なラッパーまたは親コンテナーがない場合に使用されます。ほとんどの場合、divまたはspanをコンテナとして使用しますが、そのような場合、複数の構造ディレクティブを使用する必要があります。ただし、要素に複数の構造ディレクティブを使用することはできません。その場合、ng-containerコンテナとして使用できます。

テンプレートがNG HTMLをレンダリングするための角度の要素です。直接表示されることはありません。ngIf、ngFor、ngSwitchなどの構造ディレクティブに使用します。例：
<ng-template>

<div *ngIf="hero" class="name">{{hero.name}}</div>

Angularは* ngIf属性を<ng-template>要素に変換し、このようにホスト要素をラップします。

<ng-template [ngIf]="hero">
  <div class="name">{{hero.name}}</div>
</ng-template>

ng-container
適切なホスト要素がない場合、グループ化要素として使用します。
例：

<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>

これは機能しません。一部のHTML要素では、すべての直接の子が特定のタイプである必要があるためです。たとえば、<select>要素には子が必要です。オプションを条件付きまたはでラップすることはできません<span>。

これを試して ：

<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>

これは動作します。

詳細：Angular Structural Directive

ng-templateは真の値を示します。

<ng-template>
    This is template block
</ng-template>

出力：

条件なしのng-containerショーもコンテンツを表示します。

<ng-container>
    This is container.
</ng-container>

出力：
これはコンテナーです。

ng-template名前が示すように、はテンプレートを示します。それ自体は何もレンダリングしません。a ng-containerを使用して、テンプレートを動的にレンダリングするためのプレースホルダーを提供できます。

のもう1つの使用例ng-templateは、複数の構造ディレクティブを一緒にネストするために使用できることです。あなたはこのブログ投稿でここに素晴らしい例を見つけることができます：angular ng-template / ng-container

簡単に言えば、ng-containerは子要素のレンダリングのみを支援するReactの上位コンポーネントのようなものです。

ng-templateこれは基本的にはAngularの内部実装用であり、ng-templateレンダリング中に内のすべてが完全に無視され、基本的にソースの表示に関するコメントになります。これは、Angularの内部ディレクティブなどngIfで使用されることになっていますngSwitch。

私のような<ng-container>角度.component.htmlファイルに可能な限り「マークアップ」から「ロジック」を分離するための方法として。

（部分）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>

そうすることで、HTML <table>から他の何かに変更したい場合（たとえば<div>、フレックスボックスのスタイリングの束など）、ループロジックを「切り出す」必要がありません（または完全に失われるリスクがあり<tr>ます）。また、ループ（ngFor）ロジックが通常のhtmlによって部分的に隠されないようにします。