是否可以进行深度 ng-content 选择？

Posted 2023-03-13

【中文标题】是否可以进行深度 ng-content 选择？

【英文标题】：Is deep ng-content select possible at all?

【发布时间】：2018-12-04 16:04:25

【问题描述】：

假设我想将这样的标记嵌入到 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”会有帮助吗？

【问题讨论】：

我有个简单的问题是，如果您在部分下显示某些内容，为什么要使用两个 ng-content，例如为什么不这样做 ng-content> 然后传递两个 div

因为两个 ng-content 都在页面的不同位置，用一些其他的内容相互隔开。

您也不能在 ng-content 选择字符串中使用 ::ng-deep。

【参考方案1】：

我认为 ng-content 不可能。

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

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

https://material.angular.io/cdk/portal/overview https://blog.angularindepth.com/angular-cdk-portals-b02f66dd020c https://medium.com/@sumn2u/dynamic-ui-using-portals-in-angular-cdk-6051988b0f81