将 ngIf 放在哪里？答案

【问题标题】：Where to put the ngIf?将 ngIf 放在哪里？
【发布时间】：2017-03-04 20:08:02
【问题描述】：

我有一个关于 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>

我个人发现自己遵循选项一，但看到选项三的优势。但是约定是什么？有约定吗？

【问题讨论】：

这取决于你想在你的应用程序中禁用/隐藏什么。 NgIf 完全删除了 DOM 元素，因此如果您确定以后不需要您的子组件，那么在父组件中禁用是安全的。如果您需要稍后显示它，那么在您的子组件中使用 ngIf 执行隐藏/删除部分。请记住，如果以后确定要使用元素，您当然也可以使用 ngShow/ngHide。

标签： angular angular-cli convention angular-ng-if

【解决方案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 成为模板的一部分，这似乎不是您想要做的。

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

【讨论】：

是的。我现在对选项三也有同样的感觉。我从这个选项开始，但我觉得它越来越不好了。
@tschaka1904，是的，考虑一下我所说的将 ng-if 内容作为模板查看，您会发现第二个选项似乎是最合适的
@tschaka1904，如果有帮助，请考虑接受答案:)
我想我有第三个选项的用例。我想显示加载指示器。我有一个有几个孩子的父母，他们可能也有一些孩子。我不能确定是否要加载所有子组件，因为这取决于您查看的当前内容。不知何故，我需要告诉我的加载指示器它可以再次消失，因为所有内容都已加载。在这种情况下，可能值得加载每个组件并使用我的第三个选项。但我也可能完全走错了路。你遇到过类似的情况吗？

【解决方案2】：

我的观点是，ngIf 的去向很大程度上取决于谁拥有 ngIf 绑定的变量。

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

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

【讨论】：