接續昨天的範例。
今天要聊的是 ng-container
與 ng-template
<ng-container *ngIf="(products$ | async)?.length > 0; else empty">
<ng-container *ngFor="let item of (products$ | async)"> ...略 </ng-container>
</ng-container>
<ng-template #empty> No Data </ng-template>
上面程式碼所要表達的是,若是資料大於 0 筆,頁面上就會呈現列表,沒有資料的時後在畫面上顯示 No Data
ng-container 在 Angular 的 template 裡,它不屬於任何一個 tag
,也不會被渲染出來。
而它通常都會被拿來處理一些邏輯的事情,如 *ngIf
或 *ngFor
。
雖然 *ngIf
、*ngFor
這些也能寫在 div
上,不過 div 它會被呈現出來,有時後會影響排版,這時後 ng-container
就是我們的好朋友惹!
因為在 ng-container
有使用到 if/else
,所以這時後就需要一個 ng-template
來做搭配,通常它不會直接顯示出來,而是需要透過其他的指令,如ngIf
或是 TemplateRef
的搭配,當條件成立後,ng-template
裡的內容才會被呈現
.ts
export class TemplateComponent implements OnInit, AfterViewInit {
@ViewChild('tpl') tplRef!: TemplateRef<any>;
constructor(private viewContainerRef: ViewContainerRef) {}
ngOnInit(): void {}
ngAfterViewInit() {
this.viewContainerRef.createEmbeddedView(this.tplRef);
}
}
.html
<ng-template #tpl> Hello, Angular ! </ng-template>
來看一下昨天的 ngIf as
的 範例
<ng-container *ngIf="(products$ | async) as products;">
<ng-container *ngIf="products.length > 0; else empty">
<ng-container *ngFor="let item of products"> ...略 </ng-container>
</ng-container>
</ng-container>
<ng-template #empty> No Data </ng-template>
光是 ng-container
就寫了三層,那有沒有辦法再更簡化一些呢!?
那我們可以使用 ng-template
這樣處理
<ng-container *ngIf="(products$ | async) as products; else empty">
<ng-template *ngIf="products.length > 0" ngFor let-item [ngForOf]="products">
<div class="products">...略</div>
</ng-template>
</ng-container>
在 Angular 裡有一些 xxxOutlet 的指令
如 ngTemplateOutlet
、ngComponentOutlet
接著 明天再來說說 ng-template 與 ngTemplateOutlet 這部份吧
NgForOf
ViewContainerRef
Angular *ngIf variable with async pipe multiple conditions