如何向Angular组件传递子节点？Angular5组件复用模板片段问询

哈哈，这个需求太常见了！之前传字符串用@Input很方便，但要传模板片段的话，Angular的内容投影和模板引用机制就能完美解决，我给你分几种场景详细说明：

1. 基础单插槽：直接嵌入模板（最省心） #

如果只需要给组件插入一段自定义模板，用ng-content就能快速实现，完全不影响你原来的@Input参数。

组件代码修改 #

首先在你的MyComponent模板里加入ng-content，它就像一个“占位符”，会把你使用组件时包裹的内容渲染在这里：

@Component({
  selector: 'my-component',
  template: `
    <div class="component-wrapper">
      <p>固定内容：{{attribute1}}</p>
      <!-- 这里是模板片段的占位符 -->
      <ng-content></ng-content>
      <p>固定内容：{{attribute2}}</p>
    </div>
  `
})
export class MyComponent {
  @Input() attribute1: string;
  @Input() attribute2: string;
}

使用方式 #

现在你可以直接在组件标签里写任意模板内容，它会被自动投影到ng-content的位置：

<my-component attribute1="bla" attribute2="foo">
  <!-- 这里是你要传递的模板片段 -->
  <div class="custom-content">
    <h3>我是自定义标题</h3>
    <p>这是一段自定义的HTML模板，支持绑定、指令哦！</p>
  </div>
</my-component>

2. 多插槽投影：区分不同模板区域 #

如果需要给组件传递多段不同的模板（比如头部、内容区、尾部），可以给ng-content加上select属性来指定插槽：

组件模板修改 #

<div class="component-wrapper">
  <!-- 头部插槽 -->
  <ng-content select="[slot='header']"></ng-content>
  
  <p>固定内容：{{attribute1}}</p>
  
  <!-- 内容插槽 -->
  <ng-content select="[slot='content']"></ng-content>
  
  <p>固定内容：{{attribute2}}</p>
  
  <!-- 尾部插槽 -->
  <ng-content select="[slot='footer']"></ng-content>
</div>

使用方式 #

给你的模板片段加上对应的slot属性，就能精准对应到组件里的插槽：

<my-component attribute1="bla" attribute2="foo">
  <div slot="header">
    <h2>自定义头部</h2>
  </div>
  <div slot="content">
    <ul>
      <li>自定义列表项1</li>
      <li>自定义列表项2</li>
    </ul>
  </div>
  <div slot="footer">
    <p>自定义尾部版权信息</p>
  </div>
</my-component>

3. 灵活动态模板：用TemplateRef传递（支持动态渲染） #

如果需要在组件内部动态控制模板的渲染时机、次数，或者给模板传递上下文参数，就用TemplateRef和ngTemplateOutlet来实现：

组件代码修改 #

首先在组件类里接收TemplateRef类型的输入，然后在模板里用ngTemplateOutlet渲染它：

import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <div class="component-wrapper">
      <p>固定内容：{{attribute1}}</p>
      <!-- 渲染传入的模板，还可以传递上下文参数 -->
      <ng-container *ngTemplateOutlet="customTemplate; context: { data: attribute2 }"></ng-container>
    </div>
  `
})
export class MyComponent {
  @Input() attribute1: string;
  @Input() attribute2: string;
  // 接收外部传入的模板引用
  @Input() customTemplate: TemplateRef<any>;
}

使用方式 #

先定义一个ng-template模板，然后把它的引用传递给组件：

<!-- 定义模板，还可以接收组件传递的上下文参数 -->
<ng-template #myTemplate let-data="data">
  <div class="custom">
    <p>从组件拿到的参数：{{data}}</p>
    <button (click)="doSomething()">自定义按钮</button>
  </div>
</ng-template>

<!-- 把模板引用传给组件 -->
<my-component 
  attribute1="bla" 
  attribute2="foo"
  [customTemplate]="myTemplate"
></my-component>

这种方式特别适合需要复用同一模板到多个组件，或者需要动态切换模板的场景。

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