如何在角度2中的另一个自定义标记内传递自定义标记

Question

是否可以在另一个自定义标记内传递自定义标记？

例如

<app-component-1>
    <app-component-2>
    </app-component-2>
</app-component-1>

因为app-component-1中有代码很多地方很有用。其中app-component-2代码不能在其他任何地方重复使用。

或者我们可以作为班级的财产通过吗？喜欢以下

<app-component-1 [inside_class] = 'app-component-2'
</app-component-1>

感谢任何建议

Answer 1

您可以通过向<ng-content></ng-content>模板添加<app-component-1>元素来实现此目的。

然后，当您在<app-component-1>内嵌入某些内容时，就像使用<app-component-2>

一样

<app-component-1>
  <app-component-2>
  </app-component-2>
</app-component-1>

将呈现嵌套内容而不是<ng-content></ng-content>标记

（即内部）

注意：默认情况下，<ng-content>会将所有内容嵌套在其父元素中。如果您只想渲染与嵌套在父元素中的特定css选择器匹配的元素（＆lt; - 可能令人困惑的句子），您也可以将selector=""选项传递给<ng-content>