干货｜angular ng-content在paletx2.0模式开发中的应用

点击上方“中兴开发者社区”，关注我们

每天读一篇一线开发者原创好文

在开发一个前端程序时，肯定会有很多相似的逻辑或布局，这时就需要提取公共组件或样式来尽可的复用代码。在angular中，提供了ng-content来更方便的编写组件和布

ng-content

• 在组件中嵌入内容

• 在组件中嵌入模板代码

• select属性支持css选择器（”#id”,”.class”等等）

使用

下面以表单中常见的布局为例：

  
    
    
    
    

     
     
     
     

     
     
     
     
    
     
     
     
     
        手机号码
     
     
     
     
    
     
     
     
     
    
     
     
     
     
          name="phone" [(ngModel)]="phone"  placeholder="请输入手机号"/>
     
     
     
     
    
     
     
     
     

    
    
    
    

我们封装了三个组件：form-item form-item-label form-item-wrap
我们期望form-item-label中的内容展示页面文字说明部分，form-item-wrap展示页面用户输入部分。

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 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: ''
      
      
      
      
})
      
      
      
      
export class FormItemLabelComponent {
          
      
      
      
      
}
     
     
     
     

form-item-wrap组件代码：

   
     
     
     
     

      
      
      
      
import {
           Component } from '@angular/core';
      
      
      
      
@Component({
          
      
      
      
      
  selector: 'form-item-wrap',
      
      
      
      
  template: ''
      
      
      
      
})
      
      
      
      
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的设计如何，但是建模是一定的。

组件化的优势

1. 牺牲我一个，幸福千万家

2. 以表单举例：设计师要求左边部分带必选符号”*“或者”：”，如果是各个业务的开发童鞋来写，后期设计一旦变更，就会存在更换不及时，整个产品用户体验不一致的情况，而如果通过form-item组件内部搞定这件事情，只需要开发这个组件的同事更新组件即可，保证了整体的一致性

3. 项目团队有一个css高手保证组件样式即可，极大的提升开发效率

总结

ng-content是组件化的神器，用好ng-content对一个项目有极大的便利

拓展阅读

input type=file 上传文件样式美化

angular2 JIT and AOT

浅谈angular2中的依赖注入