点击上方“中兴开发者社区”，关注我们
每天读一篇一线开发者原创好文
在开发一个前端程序时，肯定会有很多相似的逻辑或布局，这时就需要提取公共组件或样式来尽可的复用代码。在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对一个项目有极大的便利
拓展阅读