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

重构*ngif容器

angular

0

User 5842 · 技术社区 · 7 年前

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

<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 回复 | 直到 7 年前

1

0

alokstar 7 年前

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

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

2

0

Nevliin 7 年前

如果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>