ngTemplate VS ngContainer

General
1

如題，這兩樣東西我最近在使用上常常問自己，差異到底是甚麼，捫心自問說不出個所以然

爬過文的資料大部分都是說ngTemplate是一個模板，感覺在描述寫好一個template，但是需要結構型指令作為開關

ngContainer與ngTemplate兩者在一開始都不會顯示在HTML上，都需要某些條件才能顯示

但僅僅這樣個人感覺好像不夠了解

想請問版上有沒有大大可以幫忙解釋這兩者差異，感謝!!!

2

ng-template

The is an Angular element for rendering HTML. It is never displayed directly. In fact, before rendering the view, Angular replaces the <ng-template> and its contents with a comment.

比較會出現寫結構性變化時，會使用到 <ng-template>，例如

<div *ngIf="show; else notshow">
   當 show = true 時，顯示這些內容
</div>
<ng-template #notshow>
   當 show = false 時，顯示這些內容
</ng-template>

ng-container

The <ng-container> is a syntax element recognized by the Angular parser. It’s not a directive, component, class, or interface. It’s more like the curly braces in a JavaScript if -block:

常見的使用情境是不想要多寫不必要的 html ，例如 div、span 等，但又想要將一個區塊的 html 包起來處理，就會使用到 <ng-container>

  • 不使用 <ng-container> 
<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>
  • 使用 <ng-container> 
<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>
1個讚
3

謝謝 kevin大大