Angular 6：使用@ContentChildren和@HostBinding以编程方式显示/隐藏组件？

2023年11月4日 414次阅读

我想创建一个标签组件.这应该是最终结果：

<app-tab-container>
        <app-tab-item caption="A">..contentA..</app-tab-item>
        <app-tab-item caption="B">..contentB..</app-tab-item>
        <app-tab-item caption="C">..contentC..</app-tab-item>
</app-tab-container>

TabItemComponent有一个@HostBinding(‘hidden’)装饰字段：

export class TabItemComponent {
    @HostBinding('hidden') isHidden = false;
    @Input() caption: string;
}

在TabContainerComponent中,我使用@ContentChildren迭代tab-items：

export class TabContainerComponent {
    @ContentChildren(TabItemComponent) items: QueryList<TabItemComponent>;
    tabItems: string[] = [];

    ngAfterContentInit() {
        this.items.forEach((item, idx) => {item.isHidden = true; this.tabItems.push(item.caption));
    }
}

最后TabContainerComponent模板如下：

<div class="tab-title"
     *ngFor="let caption of tabItems">{{caption}}</div>
<ng-content></ng-content>

最终目标是通过点击事件切换标签项的可见性.

当我运行代码选项卡标题正确显示但内容本身(app-tab-item caption =“A”到“C”)仍然可见时,设置isHidden不会切换可见性.

请注意,我不知道“app-tab-item”组件的数量,因为我可能将“app-tab-container”放在其他地方,具有不同的内容.

如何以编程方式切换< app-tab-item>的可见性组件使用@ContentChildren？

最佳答案 我找到了解决方案.我现在设置了一个’.hidden’css类,而不是尝试设置[hidden]属性.它按预期工作：

export class TabItemComponent {
    @HostBinding('hidden') isHidden = false;
    @Input() caption: string;
}

我用过这段代码的css类：

export class TabItemComponent {
    @HostBinding('class.hidden') @Input() hidden = false;
    @Input() caption: string;
}

.hidden {
    display: none;
}
点赞