javascript - 如何在父级中隐藏/显示 ContentChild

Question

我正在使用 Angular6 构建一个选项卡组件，并且只需要根据事件选项卡显示一个组件。我怎样才能做到这一点？

我有这个结构

<tabs-ui>
    <tab-pane title="Tab 1" key="1">
        <div animate="fadeInLeft">Mi contenido 1</div>
    </tab-pane>
    <tab-pane title="Tab 2" key="2">
            <div animate="fadeInLeft">Mi contenido 2</div>
    </tab-pane>
    <tab-pane title="Tab 3" key="3">
        <div animate="fadeInLeft">Mi contenido 3</div>
    </tab-pane>
</tabs-ui>

其中 tabs-ui 是父级并且有一个 ng-content 标签

我正在使用这个抓取子元素

@ContentChildren(TabPaneComponent) tabsPanes: QueryList<TabPaneComponent>;

我如何根据 tabs-ui 中的属性隐藏或显示子项？

Answer 1

一个简单的方法是在模板中使用 *ngIf:

<tabs-ui>
    <tab-pane title="Tab 1" key="1" *ngIf="selectedContent === 'A'">
        <div animate="fadeInLeft">Mi contenido 1</div>
    </tab-pane>
    <tab-pane title="Tab 2" key="2" *ngIf="selectedContent === 'B'">
            <div animate="fadeInLeft">Mi contenido 2</div>
    </tab-pane>
    <tab-pane title="Tab 3" key="3" *ngIf="selectedContent === 'C'">
        <div animate="fadeInLeft">Mi contenido 3</div>
    </tab-pane>
</tabs-ui>

selectedContent 是组件的一个属性。在 A、B 和 C 之间更改它会显示相应的内容。