将Angular 2组件加载到区域

Question

我有一个网站，其中一个设置对话框应该加载到一个特定的区域，当点击一个按钮时。 设置对话框是一个从REST端点加载数据的组件。 我不想插入组件，只是隐藏它，因为我想节省资源。 什么是正确的Angular 2的方式来做到这一点？

Answer 1

您可以使用ngIf为该样的目的，只有当条件为真

<div *ngIf="condition"> 
    <!-- Content present in DOM only if condition == true --> 
</div> 

这样，你的数据不会在运行时加载，但是当组件插入，将插入元件（ =>当条件成立时）。

编辑：加载基于shouldBeLoaded，然后显示/隐藏基于shouldBeDisplayed;一旦shouldBeLoaded设置为true，它的价值不应该改变

<component *ngIf="shouldBeLoaded" *ngShow="shouldBeDisplayed"> 
</component> 

Answer 2

有2种方式来做到这一点：

1. <div [hidden]="condition"> content </div>它会创建content，但隐藏在condition是true

2. <div *ngIf="condition"> content </div>它会在condition为真时创建content，否则将不会