Angular 如何防止在有角度的if-else条件下重新构建组件_Angular_Conditional

Angular 如何防止在有角度的if-else条件下重新构建组件

angular

Angular 如何防止在有角度的if-else条件下重新构建组件,angular,conditional,Angular,Conditional,我是ReactJS开发者，刚刚加入Angular4俱乐部。我使用的基本条件语句有一个超级简单的条件，如下所示： <div class="app-component"> <app-country *ngIf="condition"></app-country> <app-country *ngIf="!condition"></app-country> <div>conditio

我是ReactJS开发者，刚刚加入Angular4俱乐部。我使用的基本条件语句有一个超级简单的条件，如下所示：

<div class="app-component">

    <app-country *ngIf="condition"></app-country>         
    <app-country  *ngIf="!condition"></app-country> 
    <div>condition is [{{condition}}]</div>
    <button (click)="condition=!condition">Toggle condition</button>

</div>

任何帮助都将不胜感激。谢谢

您可以使用隐藏属性而不是*ngIf，并将代码更改为：

<div class="app-component">

    <app-country [hidden]="condition"></app-country>         
    <app-country  [hidden]="!condition"></app-country> 
    <div>condition is [{{condition}}]</div>
    <button (click)="condition=!condition">Toggle condition</button>

</div>

此属性将帮助您在不触发构造函数的情况下隐藏和显示dom

您可以使用隐藏属性而不是*ngIf，并将代码更改为：

<div class="app-component">

    <app-country [hidden]="condition"></app-country>         
    <app-country  [hidden]="!condition"></app-country> 
    <div>condition is [{{condition}}]</div>
    <button (click)="condition=!condition">Toggle condition</button>

</div>

该属性将帮助您在不触发构造函数的情况下隐藏和显示dom。Vala Khosravi的回答是正确的，但只是为了给您解释一下

NgIf指令与ngFor一样被称为结构指令，这意味着它会更改模板。在ngIf情况下，它会根据条件从模板中删除组件或将其添加到模板中。若以角度从模板中删除组件，则会将其销毁

因此，您可以像Vala Khosravi所说的那样更改其可见性，或者如果您只想显示具有不同数据的相同组件，则可以使用输入。例如，使用配置数据创建对象，并根据条件更新输入

因此，如果您想根据条件显示不同的名称和标志，您有两个选项。 1.一个输入，对象，具有名称和标志属性。这可能更容易处理，但如果需要检测输入中的更改，angular不知道对象的属性已更改，因为它是相同的引用。简单的解决方法是传播对象或以任何其他方式创建新引用

<app-country [countryData]="countryData"></app-country>

在AppCountryComponent中：需要从@angular/core导入输入

@Input() countryData;

在模板中：

<div>
    <span>country name: {{countryData.name}}</span>
    <img [src]="countryData.flag">
</div>

<app-component>
    <div class="app-component"></div>
    ...
</app-component>

同样的事情，但有两个输入：

其余的你都知道

还有一件事，我最讨厌的是：没有必要。您将在模板中拥有：

<div>
    <span>country name: {{countryData.name}}</span>
    <img [src]="countryData.flag">
</div>

<app-component>
    <div class="app-component"></div>
    ...
</app-component>

如果需要设置样式，可以使用：host{display:block；}选择器。如果您需要动态地向它添加类或其他什么，您可以使用@HostBinding

希望有帮助，祝你好运。

瓦拉·科斯拉维的答案是正确的，但只是为了给你解释一下

<app-country [countryData]="countryData"></app-country>