Angular ng-content 上的多个选择器

Question

我知道可以有多个 ng-content 使用不同的选择器将内容投影到插槽中。例如

<ng-content select="h1"></ng-content>
<ng-content select="span"></ng-content>

我的问题是，是否可以在ng-content 的同一个实例上拥有多个选择器，例如

<!-- this doesn't work -->
<ng-content select="h1, h2, h3"></ng-content>
<ng-content select="span, div"></ng-content>

类似于如何为多个选择器使用相同的规则 CSS，即

h1, h2, h3 {...}
div, span {...}

Answer 1

<ng-content select="[input], [form-field]"></ng-content> 应该可以工作！

awesome.component.html

<ng-content select="[input],[form-field]"></ng-content>

even-more-awesome.component.html

<awesome>
 <h3 input>Foo!</h3>

  <h2 form-field>bar</h2>

  <h1 input form-field>foo & bar!</h1>
</awesome>

StackBlitz.

Answer 2

事实证明，这确实有效：

<ng-content select="h1, h2, h3"></ng-content>

但是，这不是：

<ng-content select="[input], [form-field]"></ng-content>

你真的不应该这样做，因为如果你要创建一个自定义属性，你应该让它成为动态的。