1.首先我們看一下 *ngIf的用法
<div *ngIf="display"> hello world </div>
在display為true 的時候,會顯示 hello world,如果想要在為false的時候展現另一個內容的時候時候呢?
<div *ngIf="!display"> world</div>
雖然上種寫法可以達到需求,但相對麻煩點,這時候我們可以使用 *ngIf ;else 的寫法,
2.ngIf 的else 的使用
可以使用一個不會展示在內容上的<ng-template></ng-template>區塊
<div *ngIf="isMobile; else notMobile">close</div> <ng-template #notMobile> <div> menu</div> </ng-template>
這個時候 當ngIf邏輯為false 時,notMobile這個<ng-template>內的 <div>menu</div>來取代close,就可以達到else 的效果了。
你以為這樣就結束了嗎?No No No
3. 在一個模版中可以共用ng-template
上文提到的是一個簡單的else使用場景,在事實上,多個ngIf的else 可以共用同一個ng-template;
<div *ngIf="isMobile; else notMobile">close</div> <div *ngIf="isOpen; else notMobile">open</div> <ng-template #notMobile> <div> menu</div> </ng-template>
上述過程中,我們只建立一個<ng-template>並且只有一個 notMobile,當模版內的其他地方有else 需求時,都可以使用notMobile里的內容,就不用為每個*ngIf都建立一個<ng-template>。