angular - Angular 6:使用@ContentChildren 和@HostBinding 以编程方式显示/隐藏组件?
问题描述
我想创建一个选项卡组件。这应该是最终结果:
<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 标题=“A”到“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;
}
推荐阅读
- c++ - 为什么这个 if/else 语句似乎被优化掉了?
- php - JSON php解析麻烦
- pdfmake - PDFMake 生成的 PDF 中的链接不会重定向到嵌入的链接
- ios - 推送通知:api.development.push.apple.com 与 api.sandbox.push.apple.com
- angular - 未捕获的 ReferenceError:在cheerio.js:5 中未定义要求
- python - Python - 示波器
- java - 为测试设置默认 Content-Type
- amazon-web-services - 通过 ansible 安装 aws-iam-authenticator
- python - 我可以运行 Google Colab(免费版)脚本然后关闭我的计算机吗?
- javascript - 从字符串正则表达式获取内联样式顶部