Angular中如何在自定义组件或指令中使用模板内容？

一、优先实现<my-big-box>自定义容器组件 #

你提到的Angular/Material里的类似实现，核心是内容投影（Content Projection），用ng-content就能搞定，步骤很直接：

• 先创建组件
  用Angular CLI快速生成：

  ng generate component my-big-box
  

• 修改组件模板
  打开my-big-box.component.html，把你原来的.box-box容器放进去，用<ng-content></ng-content>代替内容区域——这个标签就是用来接收外部传入内容的占位符：

  <div class="box-box">
    <ng-content></ng-content>
  </div>
  

  要是需要分区域投影（比如头部、主体），给ng-content加select属性就行，比如：

  <div class="box-box">
    <div class="box-header">
      <ng-content select="[header]"></ng-content>
    </div>
    <div class="box-body">
      <ng-content></ng-content> <!-- 默认接收没指定区域的内容 -->
    </div>
  </div>
  

  用的时候就这么写：

  <my-big-box>
    <div header>这里是头部</div>
    这里是主体内容
  </my-big-box>
  

• 处理样式
  原来.box-box的样式要么直接移到my-big-box.component.css里，要么继续用全局样式，组件样式文件留空也没关系。

• 模块声明
  确保MyBigBoxComponent已经加到你当前模块的declarations数组里，之后就能在任何模板里直接用<my-big-box>标签包裹内容了。

二、实现属性型指令<div myBigBox> #

如果想用属性指令的方式，本质就是给目标div自动加上box-box类，步骤如下：

• 生成指令

  ng generate directive my-big-box
  

• 编写指令逻辑
  打开my-big-box.directive.ts，通过ElementRef获取宿主元素，在初始化时添加类名：

  import { Directive, ElementRef, OnInit } from '@angular/core';
  
  @Directive({
    selector: '[myBigBox]'
  })
  export class MyBigBoxDirective implements OnInit {
    constructor(private el: ElementRef) {}
  
    ngOnInit(): void {
      this.el.nativeElement.classList.add('box-box');
    }
  }
  

• 模块声明
  把MyBigBoxDirective加到模块的declarations数组里，之后就能这么用：

  <div myBigBox>...你的内容...</div>
  

关键术语解释 #

• 内容投影（Content Projection）：就是用ng-content将父组件模板里的内容嵌入到子组件指定位置的机制，Angular官方组件和Material的容器组件全靠这个实现内容包裹。
• 属性型指令（Attribute Directive）：通过元素属性触发的指令，主要用来修改宿主元素的样式或行为，这里是最简单的添加类名场景。

内容的提问来源于stack exchange，提问作者dcp3450