我应该直接在组件上使用 Angular ngIf答案

【问题标题】：Should I use Angular ngIf directly on component我应该直接在组件上使用 Angular ngIf
【发布时间】：2018-07-08 15:32:29
【问题描述】：

我是 Angular 新手，已经习惯了基础知识。

如果我想根据变量显示或隐藏组件我应该将 *ngIf 放在组件本身还是组件内。

Eg.1 如果变量 photos 为 true，则会加载 Component 'photos' 组件

<photos *ngIf="photos"></photos>

Eg.2 组件的内容照片组件始终存在，但内容已加载

<section class="photos-content" *ngIf="photos"> // content here </section>

【问题讨论】：

标签： angular

【解决方案1】：

如果您在 html 元素（例如 2）上使用 *ngIfdirective，则该元素将在 DOM 中创建。太多的 html 元素不是那么好。你的页面会很慢。所以第一个例子（例如1）更好。

否则，您可以像这样使用<ng-container></ng-container> 扩展您的第二个示例：

<ng-container *ngIf="photos">
  <section class="photos-content">
    // content here
  </section>
</ng-container>

ng-container 不显示在 DOM 中。

更多关于ng-container 的解释可以在this 上找到很好的答案，这里有一个简短的总结：

<ng-container> 是一个逻辑容器，可用于对节点进行分组，但不会在 DOM 树中呈现为节点。

<ng-container> 呈现为 HTML 注释。

这是一个例子

这个角码：

<div>
    <ng-container>fooText</ng-container>
<div>

将在您的 html 文件中生成此注释：

<div>
    <!--template bindings={}-->fooText
<div>

阅读更多关于ng-containerhere的信息。

【讨论】：

我同意第一个选项更好，它更清晰也很常见，但是我不同意你的论点。你能否详细说明一下'所以这个元素将在 DOM 中创建。太多的 html 元素不是那么好。你的页面会很慢。 ' 您的意思是第一个示例仅在条件发生时才将元素附加到 DOM，第二个示例首先创建元素并且如果满足条件，然后将其从 DOM 中删除？我在文档中没有看到这个。具体是在哪里描述的？谢谢。
@Emocuc 我更新了我的答案。所以我希望这足以理解我的意思。
哦，我一定是真的累了，我之前没有读过你答案中的 ng-container。答案现在肯定很清楚。谢谢。