在开发一个前端程序时，肯定会有很多相似的逻辑或布局，这时就需要提取公共组件或样式来尽可的复用代码。在angular中，提供了ng-content来更方便的编写组件和布局。
ng-content
- 在组件中嵌入内容
- 在组件中嵌入模板代码
- select属性支持css选择器（”#id”,”.class”等等）
使用
下面以表单中常见的布局为例：
<form-item>
<form-item-label>
手机号码
</form-item-label>
<form-item-wrap>
<input name="phone" [(ngModel)]="phone" placeholder="请输入手机号"/>
</form-item-wrap>
</form-item>
我们封装了三个组件：form-item form-item-label form-item-wrap
我们期望form-item-label中的内容展示页面文字说明部分，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实现">
<ng-content select="form-item-label" *ngIf="itemLabel"></ng-content>
</div>
<div class="css实现">
<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组件内容。
在form-item-label和form-item-wrap中则使用ng-content来嵌入模板代码，如果没有ng-content则组件中的模板代码无法展示。（组件内css样式不再展示）
ContentChild
ContentChild 用来从通过 Content Projection 方式 (ng-content) 设置的视图中获取匹配的元素
在父组件的 ngAfterContentInit 生命周期钩子中才能成功获取通过 ContentChild 查询的元素
它和viewChild是不同的
- ViewChild 用来从模板视图中获取匹配的元素
- 在父组件的 ngAfterViewInit 生命周期钩子中才能成功获取通过 ViewChild 查询的元素
与css直接布局对比优势
本文中注册页面视效是左右布局，有些ux设计可能是上下布局，可能是点击操作弹出文字说明布局等等，这些布局抽象成建模分为两部分：文字说明部分和用户操作部分。使用ng-content编写组件，实际上相当于页面领域的建模，form-item-label是文字描述部分，form-item-wrap是用户操作部分，不论ux ui的设计如何，但是建模是一定的。
组件化的优势
- 牺牲我一个，幸福千万家
- 以表单举例：设计师要求左边部分带必选符号”*“或者”：”，如果是各个业务的开发童鞋来写，后期设计一旦变更，就会存在更换不及时，整个产品用户体验不一致的情况，而如果通过form-item组件内部搞定这件事情，只需要开发这个组件的同事更新组件即可，保证了整体的一致性
- 项目团队有一个css高手保证组件样式即可，极大的提升开发效率
总结
ng-content是组件化的神器，用好ng-content对一个项目有极大的便利。
