1. ng-template
- 形式：
<ng-template>...</ng-template>
- 默認ng-template中的內容會隱藏;
- 可通過[ngIf]來控制內容顯示隱藏；
- 此標簽不會影響原本html結構；
html:
<ng-template [ngIf]="true">
this is template!
</ng-template>
瀏覽器輸出:
瀏覽器調試窗口
2. template
- 形式：
<template>...</template>
- 默認內容會隱藏;
- 可通過Css樣式display來控制內容顯示隱藏；
- 此標簽會影響原本html結構；
html:
<template style="display: block;">
block;
</template>
瀏覽器輸出:
瀏覽器調試窗口:
3. ng-container
- 形式：
<ng-container>...</ng-container>
- 默認內容顯示;
- 可通過*ngIf來控制內容顯示隱藏；
- 此標簽不會影響原本html結構；
html:
<ng-container>
this is container!
</ng-container>
瀏覽器輸出:
瀏覽器調試窗口:
4. ng-content
- 形式：
<ng-content select = 'DOM標簽/class類/id/屬性等'>...</ng-content>
- 用於內容映射，可以定制可復用組件；
- 引用此組件時，selector標簽中間的內容將投射(或者說插入)到此組件的ng-content中;
- 此標簽上有一個select屬性，查找可以與select值相符合的內容，映射到此處；它的值可以為別的組件的selector、html標簽、class類或ID等;
(1). 無select屬性情況下的代碼:
// 子組件
@Component({
selector: 'app-child',
template: `<ng-content></ng-content>`
})
// 父組件
@Component({
selector: 'app-parent',
template: `
<app-child>內容映射1</app-child>
<app-child>內容映射2</app-child>`
})
瀏覽器輸出:
瀏覽器調試窗口:
(2). 有select屬性情況下的代碼:
// content-component.html
<div>
<ng-content select="h3.title"></ng-content>
<ng-content select="p.intro"></ng-content>
<div class="content-cmp">
<ng-content select="app-extra"></ng-content>
</div>
</div>
// parent-component.html
<app-content>
<p class='intro'>段落</p>
<h3 class='title'>標題</h3>
<app-extra></app-extra>
</app-content>
瀏覽器輸出：
4-1. 獲取 <ng-content></ng-content>映射的內容
- ContentChild - 獲取單個實例
- ContentChildren - 以QueryList 形式返回多個實例
// content.component.ts
@ContentChild(ExtraComponent) extraCmp: ExtraComponent;
// 獲取到之后可以在ngAfterContentInit()方法中操作extraCmp組件實例
