添加和删​​除子组件

Question

我有一个pageTab组件，有多个子组件。每个子组件都向父母注册，以允许父母在单击相关选项卡时显示和隐藏它们。

我的问题是我可以通过ng-if来显示和隐藏子项的内容，但是我不确定如何使组件本身显示和隐藏。有人可以帮忙吗？

问题示例：

<page-tab title="Vehicle"><!-- Correctly shown, has contents --></page-tab>
<page-tab title="Reminders"><!-- Inner contents hidden, but page-tab still visible --></page-tab>

这会在页面上创建空格，这是一个问题，因此理想情况下，我希望在ng-if组件本身上有一个page-tab，或者以某种方式让父级删除它。

这是将它们全部缝合在一起的方式：

父项page组件

registerPage(tab: IPageTab) {
    this.tabs.push(tab);

    if (this.tabs.length == 1) {
        this.showTab(tab);
    }
}

showTab(tab: IPageTab) {
    this.tabs.forEach(tab => {
        tab.controller.hide();
    });

    tab.controller.show();
}

page.html

<div><h1 flex>{{$ctrl.title}}</h1></div>

<md-nav-bar md-selected-nav-item="$ctrl.selectedPage">
    <md-nav-item ng-repeat="tab in $ctrl.tabs"
                 name="{{tab.title}}"
                 md-nav-click="$ctrl.showTab(tab)">
        {{tab.title}}
    </md-nav-item>
</md-nav-bar>

<div flex layout="column" ng-transclude></div>

PageTab组件

$onInit() {
    this.parent.registerPage({
        title: this.title,
        controller: this,
        url: ""
    });
}

show() {
    this.visible = true;
    this.$element.removeClass("hidden");
}

hide() {
    this.visible = false;
    this.$element.addClass("hidden");
}

pageTab.html

<div ng-if="$ctrl.visible" ng-transclude></div>

这是实际在实践中使用的方式

<page title="Maintenance">
    <page-tab title="Vehicles">
        <maintenance-vehicle-list flex></maintenance-vehicle-list>
    </page-tab>

    <page-tab title="Reminders">
        <task-schedule-list flex></task-schedule-list>
    </page-tab>
</page>

根据Petr的回答

更新，我现在使用$element.addClass和$element.removeClass隐藏内部内容，但理想情况下，id喜欢像dyncamilly那样向其中添加ng-if根子组件，而不是通过CSS /类显示和隐藏。