Question

我正在使用Angular6构建一个Tabs组件，并且只需要显示一个组件即可，具体取决于活动的Tab。我该如何完成？

我有这个结构

<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之间进行更改会显示适当的内容。

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

1 个答案: