Question

我正在寻找一种重构以下代码的更好方法：

<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]的方法，但无法提出最终解决方案。 [ngSwitch]似乎是一个不错的选择，尽管我必须使测试变量具有通用性，因为A和B是不同类型的。

谢谢

Answer 1

您可以使用Angular的if-else模板，我相信它将易于阅读和测试。

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

Answer 2

如果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”'从图标移到容器div来解决此问题-当然，这取决于用例。

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

重构* ngIf容器

2 个答案: