在開發(fā)一個(gè)前端程序時(shí)，肯定會(huì)有很多相似的邏輯或布局，這時(shí)就需要提取公共組件或樣式來盡可的復(fù)用代碼。在angular中，提供了ng-content來更方便的編寫組件和布局。

ng-content

• 在組件中嵌入內(nèi)容
• 在組件中嵌入模板代碼
• select屬性支持css選擇器（”#id”,”.class”等等）

使用
下面以表單中常見的布局為例：

<form-item>
    <form-item-label>
        手機(jī)號(hào)碼
    </form-item-label>
    <form-item-wrap>
        <input  name="phone" [(ngModel)]="phone"  placeholder="請(qǐng)輸入手機(jī)號(hào)"/>
    </form-item-wrap>
</form-item>

我們封裝了三個(gè)組件：form-item form-item-label form-item-wrap
我們期望form-item-label中的內(nèi)容展示頁面文字說明部分，form-item-wrap展示頁面用戶輸入部分。

<form-item>
    <form-item-label>
    <!-- your html code -->
    </form-item-label>
    <form-item-wrap>
    <!-- your html code -->
    </form-item-wrap>
</form-item>

form-item組件代碼：

import { Component, ContentChild } from '@angular/core';
import { FormItemLabelComponent } from './form-item-lable.component';
import { FormItemWrapComponent } from './form-item-wrap.component';
@Component({
  selector: 'form-item',
  templateUrl: './form-item.component.html'
})
export class FormItemComponent {
  @ContentChild(FormItemLabelComponent) itemLabel;
  @ContentChild(FormItemWrapComponent) itemWrap;
}
html:
<div>
    <div class="css實(shí)現(xiàn)">
        <ng-content select="form-item-label" *ngIf="itemLabel"></ng-content>
    </div>
    <div class="css實(shí)現(xiàn)">
      <ng-content select="form-item-wrap" *ngIf="itemWrap"></ng-content>
    </div>
</div>

form-item-label組件代碼：

import { Component } from '@angular/core';
@Component({
  selector: 'form-item-label',
  template: '<ng-content></ng-content>'
})
export class FormItemLabelComponent {
}

form-item-wrap組件代碼：

import { Component } from '@angular/core';
@Component({
  selector: 'form-item-wrap',
  template: '<ng-content></ng-content>'
})
export class FormItemWrapComponent {
}

在組件form-item中通過ng-content的select屬性（使用的是css的element選擇器）投影form-item-label和form-item-wrap組件內(nèi)容。

在form-item-label和form-item-wrap中則使用ng-content來嵌入模板代碼，如果沒有ng-content則組件中的模板代碼無法展示。（組件內(nèi)css樣式不再展示）

ContentChild

• ContentChild 用來從通過 Content Projection 方式 (ng-content) 設(shè)置的視圖中獲取匹配的元素

• 在父組件的 ngAfterContentInit 生命周期鉤子中才能成功獲取通過 ContentChild 查詢的元素

它和viewChild是不同的

• ViewChild 用來從模板視圖中獲取匹配的元素
• 在父組件的 ngAfterViewInit 生命周期鉤子中才能成功獲取通過 ViewChild 查詢的元素

與css直接布局對(duì)比優(yōu)勢(shì)

本文中注冊(cè)頁面視效是左右布局，有些ux設(shè)計(jì)可能是上下布局，可能是點(diǎn)擊操作彈出文字說明布局等等，這些布局抽象成建模分為兩部分：文字說明部分和用戶操作部分。使用ng-content編寫組件，實(shí)際上相當(dāng)于頁面領(lǐng)域的建模，form-item-label是文字描述部分，form-item-wrap是用戶操作部分，不論ux ui的設(shè)計(jì)如何，但是建模是一定的。

組件化的優(yōu)勢(shì)

1. 犧牲我一個(gè)，幸福千萬家
2. 以表單舉例：設(shè)計(jì)師要求左邊部分帶必選符號(hào)”*“或者”：”，如果是各個(gè)業(yè)務(wù)的開發(fā)童鞋來寫，后期設(shè)計(jì)一旦變更，就會(huì)存在更換不及時(shí)，整個(gè)產(chǎn)品用戶體驗(yàn)不一致的情況，而如果通過form-item組件內(nèi)部搞定這件事情，只需要開發(fā)這個(gè)組件的同事更新組件即可，保證了整體的一致性
3. 項(xiàng)目團(tuán)隊(duì)有一個(gè)css高手保證組件樣式即可，極大的提升開發(fā)效率

總結(jié)

ng-content是組件化的神器，用好ng-content對(duì)一個(gè)項(xiàng)目有極大的便利。