Angular 6:使用@ContentChildren和@HostBinding以编程方式显示/
发布时间:2020-12-17 17:11:27 所属栏目:安全 来源:网络整理
导读:我想创建一个标签组件.这应该是最终结果: 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 TabItemCompon
我想创建一个标签组件.这应该是最终结果:
<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; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |