在Angular4中切换路由时防止重新加载组件答案

【问题标题】：prevent reload component when switching in routes in Angular4在Angular4中切换路由时防止重新加载组件
【发布时间】：2018-03-14 17:11:27
【问题描述】：

我有一个类似的页面：

有两个标签：A和B，点击A时出口会出现组件A，点击B时会显示组件B。

现在点击标签B并呈现组件B，然后点击标签A，然后点击B，组件将通过ngOnInit引发重新加载。问题是：

在A和B之间切换时如何防止组件B重新加载，我想只初始化一次组件B。

【问题讨论】：

标签： angular

【解决方案1】：

如果您不想在更改路线时重新加载组件，为什么不简单地将组件放在页面中并相应地隐藏/显示它们？请检查我创建的这个示例：

【讨论】：

糟糕的解决方案恕我直言，如果组件包含重物，则会严重影响性能。
@Sampgun 我不确定我是否将这个问题称为糟糕的解决方案。但如果您有更好的想法，我很乐意支持您的解决方案。
我现在没有时间写答案，但基本上使用主题（在某些工厂中）来保存两条路线的最后状态就可以了。另外，如果我没记错的话，可以自定义 Angular routesReusingStrategy 以实现相同的目标。
在这里，类似 itnext.io/… 的内容（未经测试，但我必须做类似的事情，所以我将能够更新这个问题。我会为此添加书签。）
感谢分享链接。我同意你的观点，我们可以使用“RouteReuseStrategy”，它可能是一个更好（更漂亮）的解决方案。但是，我不清楚它如何影响性能？问题是只调用一次组件 B 的 ngOnInit，我不确定如果我们使用“RouteReuseStrategy”是否有什么不同。

【解决方案2】：

我使用了 Angular service 来维护组件的所有数据，并在组件的构造函数中调用了相关函数将这些值分配给组件的局部变量/对象。

因此，在每次切换时，都会调用组件的构造函数并从服务中获取属性。

如果不是constructor，您也可以在ngOnInit() 中进行相同的调用。

【讨论】：