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

Question

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

有时tabItem在其他子组件中。我的问题是Angular从直接子级而不是内部子级（app-my-tab）中选择内容，有什么办法吗？

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>

查看此stackblitz

Answer 1

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

1. 轻松理解真实代码
2. 易于调试。

如果您确实想这样做，请在app-my-tab中使用 * ngIf 。

要使用*ngIF：

1. app-tabs中的所有元素必须具有tabItem属性
2. 发送条件以显示/隐藏app-my-tab组件中的其他元素。并且app-my-tab收到它作为@Input()属性
3. 在app-my-tab html中使用*ngIf显示或隐藏某些元素

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