如何从 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