使用 ng-content 选择基类

【问题标题】：Using ng-content to select base class使用 ng-content 选择基类
【发布时间】：2019-07-11 02:06:01
【问题描述】：

假设我有一个组件Parent，它的内容项目Child 组件如下。在这种情况下，Child 是一个抽象基类，由组件ChildA 和ChildB 扩展。这是用户模板中的一个示例用例：

<parent>
  <child-a></child-a> // or child-b
</parent>

在Parent 的模板中，我想使用<ng-content> 对Child 组件进行内容投影。但是，我希望能够使用<ng-content> 并以某种方式选择<child-a> 或<child-b>，例如：

<ng-content select="child-a | child-b"></ng-content>

有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

您可以使用逗号分隔的列表来执行此操作，如下所示：

<ng-content select="child-a,child-b"></ng-content>

【讨论】：

好的。有没有办法通过 base class 以某种方式进行选择？我猜不是，因为它只是一个类而不是“组件”。我可能最终会按照你的建议去做，但我不是它的巨大粉丝，因为父类必须“了解”它需要支持的不同类型的子组件。
不，很遗憾，您只能使用选择器根据模板中可见的内容进行选择，即 CSS 类、属性或元素名称
尽管他们可以将 HostBinding 添加到抽象类，以便组件上始终有一个特定的类，然后它们将用于选择器。 @HostBinding('class.some-class') someField: boolean = true;<ng-content select=".some-class"></ng-content>