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

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

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

在开发一个前端程序时，肯定会有很多相似的逻辑或布局，这时就需要提取公共组件或样式来尽可的复用代码。在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>