角度如何传达显示哪个元素答案

【问题标题】：How does angular communicate which element is shown角度如何传达显示哪个元素
【发布时间】：2017-03-09 21:27:10
【问题描述】：

同学们！

我正在为我的 Web 应用程序编写一个组件，例如一个表格。表格组件有时是隐藏的，这意味着它在组件树中但不向用户显示。例如：

<custom-tab> <!-- shown -->
  <custom-table /> 
</custom-tab>
<custom-tab> <!-- NOT shown -->
  <custom-table />
</custom-tab>

隐藏（未显示）的自定义表格组件将其数据加载到 ngOnInit 方法中，该方法由 Angular 为两个表格（显示和未显示）执行。如果我将特定的 ngIf 添加到表中（评估是否显示选项卡），则不会调用 ngOnInit 方法。此解决方案非常麻烦，因为可能存在非常复杂的场景，即大量组件层次结构决定是否显示组件。查看浏览器的 DOM，我发现 DOM 中不存在正确的自定义表格元素。 Angular 无论如何都会初始化这些组件（并调用 ngOnInit）。

问题：

角度如何传达组件基本上在 DOM 中并且无法显示（忽略 CSS）？
如何有意义地禁止组件在未显示的情况下加载数据，并且仅在向用户显示时才加载数据？

谢谢！

【问题讨论】：

标签： angular

【解决方案1】：

从 Angular 1 的角度来看，它适用于 Two Way Data Binding。概念。这实质上意味着视图和模型都可以使用相同的数据。

因此，无论您使用 ng-if 还是 ng-show/ng-hide，数据都存在于模型的视图中，反之亦然。这只是 CSS 的一种玩法（无论是在 ng-if 的情况下从 DOM 中删除还是在 ng-show/hide 的情况下隐藏）

【讨论】：

【解决方案2】：

不确定 1) 到底是什么。也许这回答了你的问题。

如果传递给*ngIf="..." 的表达式的计算结果为false，*ngIf 会从 DOM 中删除该元素，并且该元素上的一个组件也将被销毁。当表达式计算为true 时，将添加元素并重新创建组件。

Angular2 每次执行变更检测时都会检查表达式。

您可以使用[hidden]="..." 来防止组件被删除，而只是被隐藏。

另见What is the equivalent of ngShow and ngHide in Angular2?

2) 如果组件未添加到 DOM，则不会加载数据。例如，如果将 *ngIf="evaluatesToFalse" 添加到元素中。除此之外，Angular 不知道组件是否显示。

【讨论】：