Angular2：ngIf 不破坏组件答案

【问题标题】：Angular2: ngIf without destroying componentAngular2：ngIf 不破坏组件
【发布时间】：2016-07-21 20:18:25
【问题描述】：

我有一个网页，其中一个选项卡控件占据了屏幕的一部分。使用 *ngIf 显示/隐藏选项卡，并将所选选项卡与枚举进行比较。因此，每次用户更改选项卡时，组件都会被销毁/创建。

通常这很好，但其中一个选项卡包含 Bing 地图。每次选择选项卡时，都会重新加载地图控件 - 导致地图短暂显示当前 IP 位置，直到加载所需的位置和引脚（几分之一秒后）。

我能够解决这个问题的唯一方法是停止对该选项卡使用 *ngIf，而是设置自定义样式：

.hide { 高度：0px;溢出：隐藏； }

到目前为止，这似乎工作得很好，但我担心这会在未来产生错误。

有没有 angular2 有福的方式来隐藏组件而不破坏组件？

谢谢。

【问题讨论】：

【解决方案1】：

[hidden] 属性是您正在寻找的。它或多或少地取代了 Angular2 中的 ng-show / ng-hide。

在offical docs 中找到它或在此处查看他们的代码示例：

<h3 [hidden]="!favoriteHero">
   Your favorite hero is: {{favoriteHero}}
</h3>

【讨论】：

[hidden]="" 和 "display:none;"有同样的问题 - 地图代码似乎无法配置地图。根据我的阅读，必应地图在配置时应该是可见的，然后在之后隐藏。 [blogs.bing.com/maps/2012/02/23/….
嗯，我明白了。 1）链接似乎不起作用。 2）你的问题可能有点误导。它实际上不是关于“ngIf”和“破坏组件”，而是更多关于 Bing 地图的具体要求。我建议您开始一个新问题，明确 Bing 的特定问题。也许您甚至可以为您的案例提供一个 plunkr？

【解决方案2】：

使用 angular 的 [hidden] 属性，它不会从 DOM 中删除部分/组件，而是将其从视图中隐藏，因此无需在 DOM 中重新实例化组件（类似于 css display: hidden 属性）

【讨论】：