如何从ng内容中的内部子项中选择内容

Question

我有一个名为tab的组件，它具有<ng-content select="[tabItem]"></ng-content>

有时tabItem位于其他子组件内部。我的问题是Angular从直接的子对象中选择内容，而不是内部的子对象(应用程序我的选项卡(，有什么方法可以做到吗？

app.component.html

<app-tabs>
<div tabItem>
Tab 1
</div>
<div tabItem>
Tab 2
</div>
<app-my-tab></app-my-tab>
</app-tabs>

my-tab.component.html

<div tabItem> 
My Tab
</div>
<div>
Other content
</div>

查看此堆叠式

Answer 1

没有深度选择的解决方案。我认为这是合乎逻辑的，因为：

1. 轻松理解并实现代码
2. 易于调试

如果你真的想这么做，请在应用程序我的选项卡中使用*ngIf。

使用*ngIF:

1. app-tabs中的所有元素都必须具有tabItem属性
2. 发送条件以在app-my-tab组件中显示/隐藏其他元素。并且CCD_ 8将其作为CCD_
3. 在app-my-tabhtml中，使用*ngIf显示或隐藏某些元素

示例：https://stackblitz.com/edit/deep-ng-content-2gyttv?file=src/app/app.component.html