gpt4 book ai didi

Angular 6 : Show/Hide component programmatically using @ContentChildren and @HostBinding?

转载 作者:太空狗 更新时间:2023-10-29 17:56:25 25 4
gpt4 key购买 nike

我想创建一个选项卡组件。这应该是最终结果:

<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 遍历选项卡项:

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"to "C")仍然可见时,设置 isHidden 不会切换可见性。

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

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

最佳答案

我找到了解决方案。我现在没有尝试设置 [hidden] 属性,而是设置了一个“.hidden”css 类。它按预期工作:

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;
}

关于 Angular 6 : Show/Hide component programmatically using @ContentChildren and @HostBinding?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50458920/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com