如何强制Angular2每次显示组件时都重新创建它们

Question

在我们的Angular2 Typescript应用程序中，我们使用路由器。 我们的组件非常通用，并且它们的行为基于从路由器获取的参数而发生巨大变化。

该应用程序处于早期开发阶段，我所指的行为是最近观察到的。 我不确定这是因为代码的更改还是因为库中出现了破坏性变化。

考虑一个名为“List”的组件。它从上下文（路由、包装组件等）获取一些信息，例如它应显示的实体类型。

现在，当我更改路由时，“List”组件不会重新实例化，但其参数会更新。由于我在 “ngOnInit” 中使用这些参数来设置组件，后面的更改将没有任何效果。

我知道我可以使用更改检测来解决此问题，但我不想这样做。原因是这将使开发人员更容易引入回归错误（例如：转到People列表，然后执行某些操作，转到Orders列表，出现不应该存在的内容），这些错误更难以发现、测试和复制。它们更有可能泄漏到生产环境中。

如何在路由更改时强制Angular重新创建List组件。

更多观察结果：在路由器中，如果我导航到不显示List组件的路由，然后返回List，该组件将被重新实例化。

- Alireza

---

以前在Angular的Alpha版本中有一个routerCanReuse，但不确定它现在怎么样了...似乎在路由器3.x中没有实现，可以查看https://github.com/angular/angular/issues/9811 - Sasxa

Answer 1

订阅当前路由参数；这是一个可观察对象。

- Sameh

Answer 2

你可以使用async管道来展示Observable的最后一个值，而不是订阅它。

文档: Pipes

- Michael Jota

Answer 3

当路由器导航到新路由时，它将比较现有组件树和新组件树，销毁不再需要的组件，创建不存在的所需组件，并重用任何仍然需要的组件实例。如果您使用同一个路由，然后手动从完整的URL字符串中提取suffixStuff，Angular将不会注意到suffixStuff的更改，也不会重新创建组件。如果您使用正确声明其suffixStuff的路由（Sameh的答案中的活动路由参数），以便Angular注意到它，Angular将注意到并重新创建仍然需要的组件。

即便如此，这里还有一个要考虑的情况。例如，列表组件的oninit获取活动路由参数并执行一次从数据库读取以设置组件。我们允许用户在该组件上单击以创建、更新、删除数据库中的记录。因此，当这些操作完成时，我们希望从数据库进行重新读取以向用户显示结果（只显示ACID数据是很好的做法，不是吗？）。我们自然会寻找我们的readAndSetup代码，它错误地存在于oninit方法中，并尝试某种形式的页面重新加载或重新路由，将面临连续导航到相同路由（包括所有活动参数）将重用整个现有组件树的问题。

我们应该做的是将设置代码与oninit分离。 Oninit将获取活动路由参数，从中创建并记住一个formedDbQuery，然后调用单独的this.readFromDb方法来使用记忆的formedDbQuery。这样，重新读取不需要重新创建组件（调用oninit），我们只需在操作完成后调用this.readFromDb即可。

- BeatriceThalo