代码之家 › 专栏 › 技术社区 › Wolf359

角度6:使用@contentchildren和@hostbinding以编程方式显示/隐藏组件?

angular

Wolf359 · 技术社区 · 6 年前

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

<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?

1 回复 | 直到 6 年前

Wolf359 6 年前

我找到了解决办法。我现在设置了一个“.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;
}

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前