Question

我对Angular 2的ngIf有疑问。我目前正在开发我的第一个更大的Angular 2-App，并且我想知道ngIf的最佳定位。我认为应该有一定的一致性。关于加载子组件，这是我能想到的三个选项：

在父组件的div中：

<div id="parent-component-div" *ngIf="loadChildComponent">
  <app-child-component></app-child-component>
</div>

在父组件的子组件标签中：

<div id="parent-component-div">
  <app-child-component *ngIf="loadChildComponent"></app-child-component>
</div>

在子组件中：

<!-- parent-component -->
<div id="parent-component-div">
      <app-child-component></app-child-component>
</div>

<!-- child-component -->
<div id="child-component-div" *ngIf="loadComponent">
      <!-- child-component logic -->
</div>

我个人认为，我的自我跟随选项一，但看到选项三的优点。但是惯例是什么？有会议吗？

Answer 1

这当然是非常主观的，但我认为它应该放在基于某些条件显示或隐藏的元素上。

<div id="parent-component-div">
  <app-child-component *ngIf="loadChildComponent"></app-child-component>
</div>

然后我们可以假设这部分html是一个模板。因此，如果您将ngIf放在元素本身上，并且我们知道如何转换结构ngIf指令，那么我们最终得到这个DOM：

<div id="parent-component-div">
  <template [ngIf]="loadChildComponent">
      <app-child-component></app-child-component>
  </template>
</div>

这是有道理的。如果您将ngIf放在父div上，如下所示：

<div id="parent-component-div" *ngIf="loadChildComponent">
  <app-child-component></app-child-component>
</div>

parent-component-div成为模板的一部分，它似乎不是您想要做的。

第三种选择对我来说似乎是最不合适的，因为组件不应该关心它是否显示。如果显示，那么它应该继续它的功能。

Answer 2

我的观点是，ngIf的去向取决于谁拥有变量ngIf所绑定的人。

如果该loadComponent布尔值的设置是属于父组件的行为，那么您可以使用选项2.

但是如果loadComponent确实属于子组件，那么选项3更有意义。

在哪里放ngIf？

2 个答案: