代码之家 › 专栏 › 技术社区 › User 5842

重构*ngif容器

angular

User 5842 · 技术社区 · 5 年前

我正在寻找一种更好的方法来重构我拥有的以下代码:

<div class="container">
    <icon class="icon" *ngIf="A || B"></icon>
    <div class="itemOne" *ngIf="A"></div>
    <div class="itemTwo" *ngIf="B"></div>
</div>

我觉得这里面有太多的重复代码,但它也可能是那种可读性优于任何巧妙技巧的情况。

我研究过使用 ng-template 和 [ngSwitch] 但无法得出最终的解决方案。 [开关] 似乎它是一个很好的候选者,尽管我必须将测试变量设置为 A 和 B 是不同类型的。

谢谢

2 回复 | 直到 5 年前

alokstar 5 年前

您可以使用if-else模板的角度,我相信这将是可读的和容易测试的。

<div *ngIf="A;else other_content">
    content here ...
</div>

Nevliin 5 年前

如果itemOne和itemTwo之间的唯一区别是类,则可以使用[ngclass]中的条件来去掉一行和*ngif:

<div class="container">
    <icon class="icon" *ngIf="A || B"></icon>    
    <div [ngClass]="{ 'itemOne': A, 'itemTwo' B }"></div>
</div>

但是,这也意味着即使a和b都是假的,也将始终显示DIV。您可以通过将“*ngif=”a b“'从图标移动到container div来解决这个问题—当然这取决于用例。

<div class="container" *ngIf="A || B">
    <icon class="icon"></icon>    
    <div [ngClass]="{ 'itemOne': A, 'itemTwo' B }"></div>
</div>

推荐文章

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

1 年前

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

1 年前

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

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

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

1 年前

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

1 年前

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

1 年前

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

1 年前

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

2 年前