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

我的tab.component.html

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

看到这个堆栈闪电战

Answer 1

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

1. 轻松理解和真正的代码
2. 易于调试。

如果你真的想这样做，请在 app-my-tab中使用*ngIf 。

要使用*ngIF：

1. 中的所有元素都app-tabs必须具有tabItem属性
2. 发送您的条件以在app-my-tab组件中显示/隐藏其他一些元素。并将app-my-tab其作为@Input()财产接收
3. 在app-my-tabhtml 中用于*ngIf显示或隐藏某些元素

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