Angular template ng-template/container/content

1. ng-template

• 形式：<ng-template>...</ng-template>
• 默認ng-template中的內容會隱藏;
• 可經過[ngIf]來控制內容顯示隱藏；
• 此標籤不會影響本來html結構；

html:

<ng-template [ngIf]="true">
  this is template!
</ng-template>

瀏覽器輸出:

瀏覽器調試窗口

<p style="margin-top: 40px;"></p>

2. template

• 形式：<template>...</template>
• 默認內容會隱藏;
• 可經過Css樣式display來控制內容顯示隱藏；
• 此標籤會影響本來html結構；

html:

<template style="display: block;">
  block;
</template>

瀏覽器輸出:

瀏覽器調試窗口:

<p style="margin-top: 40px;"></p>

3. ng-container

• 形式：<ng-container>...</ng-container>
• 默認內容顯示;
• 可經過*ngIf來控制內容顯示隱藏；
• 此標籤不會影響本來html結構；

html:

<ng-container>
  this is container!
</ng-container>

瀏覽器輸出:

瀏覽器調試窗口:

<p style="margin-top: 40px;"></p>

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>

瀏覽器輸出：

<p style="margin-top: 24px;"></p>

4-1. 獲取 <ng-content></ng-content>映射的內容

• ContentChild - 獲取單個實例
• ContentChildren - 以QueryList 形式返回多個實例

// content.component.ts
@ContentChild(ExtraComponent) extraCmp: ExtraComponent;

// 獲取到以後能夠在ngAfterContentInit()方法中操做extraCmp組件實例