首页 > 解决方案 > 是否可以进行深度 ng-content 选择?

问题描述

假设我想将这样的标记嵌入到 ng-content 中:

<div aaa>
  AAA
</div>
<div aaa bbb>
  BBB
</div>

为此,我可以使用选择器(看起来像普通的 CSS 选择器):

<ng-content select="div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="div[aaa][bbb]"></ng-content>

但是如果我有这个内容怎么办(我无法摆脱'section'标签):

<section>
  <div aaa>
    AAA
  </div>
  <div aaa bbb>
    BBB
  </div>
</section>

我可以使用哪些选择器来获得相同的结果?这对我不起作用:

<ng-content select="section div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section div[aaa][bbb]"></ng-content>

这都不是:

<ng-content select="section>div[aaa]"></ng-content>
----- some other content here -----
<ng-content select="section>div[aaa][bbb]"></ng-content>

有什么解决方法吗?为什么选择器不能像 CSS 一样工作?这是设计使然吗?我在文档上找不到原因...

如果将 'section' 标签替换为 'ng-template' 或 'ng-container' 会有帮助吗?

标签: angularangular2-templateangular2-ngcontentng-content

解决方案


我不相信 ng-content 是可能的。

您想要做的事情有其他选择,但是它们有点复杂。

我首选的方法是使用 Angular CDK 门户。如需更多信息,请参阅:


推荐阅读