javascript - Angular ng-content 上的多个选择器

Question

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

<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>应该管用！

真棒组件.html

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

甚至更棒的.component.html

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

  <h2 form-field>bar</h2>

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

堆栈闪电战。

Answer 2

事实证明，这确实有效：

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

但是，这不会：

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

无论如何，您确实不应该这样做，因为如果您要创建自定义属性，则应该使其成为动态的。