Question

对于任何div或h1或我自己组件中的任何内容，如下所示：

<app-my-comp>
    <div>original div</div>
</app-my-comp>

我想在渲染时将其转换为以下内容：

<div class="..." someAttribute="someValue">
   <div>original div</div>
   <div>a new div generated by my component</div>
   <div>another new div generated by my component</div>
</div>

我该如何实现？我完全没有想法，所以我什至都不知道谷歌。

Answer 1

使用ng-content显示原始内容。您的模板如下所示：

<div class="some-class" someAttribute="someValue">
  <ng-content></ng-content>
  <div>a new div generated by my component</div>
  <div>another new div generated by my component</div>
</div>

这是一个有效的示例：https://stackblitz.com/edit/angular-ng-content-57868654

Answer 2

这远远超出了angular的用例。对于有角度的，您只需提供“原始div”作为@input。如果您真的想使用自己在自定义组件中提供的任何标签来实现此目的，则必须使用@ViewChild和afterViewInit生命周期，在其中使用Renderer2来操作DOM手动。

访问我组件的孩子，对其进行重建并放回原处

2 个答案: