Angular 5如何移除渲染HTML中的多余包裹元素？

嘿，刚上手Angular 5确实会有这种困惑，毕竟它的组件模型和AngularJS、React还是有不少细节差异的，我来给你捋清楚这个问题～

你遇到的现象本质上是Angular的内容投影在起作用，这和你熟悉的React里的children、AngularJS里的transclude是类似的概念，但实现逻辑更清晰。

举个例子，你写的这段代码：

<app-button>
  <app-text> My Text </app-text>
</app-button>

其中<app-text> My Text </app-text>是你传入给app-button的自定义内容，而app-button组件的内部模板里，肯定有一段类似这样的代码：

<!-- app-button.component.html 示例 -->
<button class="my-custom-button">
  <ng-content></ng-content> <!-- 这里就是接收外部内容的"投影插槽" -->
</button>

渲染过程拆解 #

1. 当Angular渲染<app-button>时，会先加载它的内部模板，也就是那个<button>标签
2. 然后把你在<app-button>标签内部写的所有内容（也就是<app-text> My Text </app-text>），替换到模板里的<ng-content>位置
3. 最终生成的DOM结构就变成了：

<app-button>
  <button class="my-custom-button">
    <app-text> My Text </app-text>
  </button>
</app-button>

这就是你看到"渲染后的DOM结构为<app-button> <button..."的原因。

结合你熟悉的技术对比 #

• 在React里，你会用{this.props.children}来渲染传入组件的子内容，和Angular的<ng-content>作用完全一致
• 在AngularJS里，对应的是ng-transclude指令，但Angular 5的<ng-content>支持更灵活的选择（比如只投影特定标签）

额外小知识点 #

• 如果app-button的模板里没有<ng-content>，那你传入的<app-text>内容会被直接忽略，不会出现在最终DOM里
• 你还可以给<ng-content>加选择器，比如<ng-content select="app-text">，这样只会投影<app-text>标签，其他内容会被过滤掉，适合更复杂的组件复用场景

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