将 @ContentChild 元素动态添加到父组件内的特定 div

【问题标题】：Dynamically add @ContentChild element to a specific div inside the parent component将 @ContentChild 元素动态添加到父组件内的特定 div
【发布时间】：2020-06-08 06:40:34
【问题描述】：

是否可以将 @ContentChild 元素（使用指令）添加到组件模板内的 div 中？下面给出 HTML 模板供参考。

应用组件.html：

<app-root>

    <a-component>
        <div a-directive>
        </div>
    </a-component>

</app-root>

a-component.html:

<div>
    Title
</div>

<div #container>
    <!-- place holder for a-directive element -->
</div>

【问题讨论】：

标签： angular

【解决方案1】：

您可以尝试使用<ng-content> 标签。试试下面的

a-component.html:

<div>
  Title
</div>

<div #container>
  <ng-content></ng-content>
</div>

应用组件.html：

<app-root>
  <a-component>
    <div a-directive></div>
  </a-component>
</app-root>

<a-component> 选择器中的语句将呈现在 a 组件的 <ng-content> 中。

【讨论】：

我知道这里可以使用 ng-content。但是，据我了解，模板中应该存在 ng-content 标签。我的要求是创建动态占位符，例如，使用 ngFor，并将这些 a 指令元素添加到占位符中。