ngIf NG-テンプレート

Question

で作業していない、私は以下の角4にブール値に基づいてテンプレートを表示または非表示にするには、これはHome.Component.HTML

の内側にある--- HTMLとコード

です

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView ></ng-template> 

----これはHomeComponent

コードの上

isSummaryViewVisbile: boolean = true; 

が動作しないの内側に、私は本当の割り当てだが、それは常にテンプレートを隠しています。

ありがとうございます。

Answer 1

ng-templateは、HTMLをレンダリングするためのAngular要素です。直接表示されることはありません。実際、ビューをレンダリングする前に、Angularはその内容をコメントで置き換えます。構造指示がなく、ng-templateにいくつかの要素をラップするだけで、これらの要素は消えます。

<p>Hip!</p> 
<ng-template> 
    <p>Hip!</p> //would disappear 
</ng-template> 
<p>Hooray!</p> 

したがって、次のコードは、

isSummaryViewVisbile = true; 

<ng-template [ngIf]="isSummaryViewVisbile" #pricebookView > 
     Hello world. 
</ng-template> 

正常に動作します。しかし、あなたが*で[ngIf]交換した場合ngIfは、同じコードが動作しないでしょう。

内部的に、Angularは* ngIf属性をホスト要素にラップされたng-template要素に変換します。例えば

<ng-template *ngIf="isSummaryViewVisbile" #pricebookView > 
     Hello world. 
</ng-template> 

が

<ng-template [ngIf]="isSummaryViewVisbile"> 
     <ng-template #pricebookView > 
      Hello world. 
    </ng-template> 
</ng-template> 

ツー変換されます今、私たちは、内側NG-テンプレートを見ることができるように、常にそれが、これは明確に願っていますcontent.Iだ非表示になります。

デモ：https://plnkr.co/edit/yB7PKx?p=preview