路由到父路由时销毁所有子组件

Posted 2023-02-22

【中文标题】路由到父路由时销毁所有子组件

【英文标题】：Destroy all sub-components when routing to a parent route

【发布时间】：2018-12-19 08:46:17

【问题描述】：

我有一个应用程序，其中我的父路由重定向到加载整个视图的子路由。 在这里，我有许多组件从服务器获取数据并进行渲染。

基于某些条件，我使用不同的参数重定向到父路由。子路由再次加载了传递给它的刷新数据。

parent ---> child -------------------Components getting data from Server ----
   <-----Different params------------

但是在子路由中，有某些组件仍在显示旧数据。通常他们从服务器获取数据来渲染它。

在我看来，它们在重新路由到父路由时没有被破坏，因此使用旧数据而不是从服务器获取数据来呈现。

关于可能是什么问题的任何建议？

编辑：

看来这不是问题所在。重新布线时，组件会被正确销毁。问题在于未重新创建的服务。

Relevant Question

【参考方案1】：

服务不会被重新创建，因为它们默认是单例实例。

根据 Angular 的文档：

服务是注入器范围内的单例。有在 给定注入器中的大多数服务实例。

只有一个root注入器，并且注册了UserService 用那个喷油器。因此，只能有一个 UserService 整个应用程序中的实例，以及注入 UserService 的每个类 获取此服务实例。

然而，Angular DI 是一个分层注入系统，这意味着 嵌套注入器可以创建自己的服务实例。角 一直创建嵌套注入器

解决办法：

如果你真的想在每个组件中创建一个新的服务实例，你必须在组件定义时为它们声明一个提供者。

@Component(
  selector: 'child2',
  templateUrl: './child2.component.html',

  // create a new instance of the service
  providers: [AngularService]
)

组件注入器是相互独立的，并且它们中的每一个 创建自己的组件提供服务的实例。

...

当 Angular 销毁这些组件实例之一时，它也会 销毁组件的注入器和注入器的服务 实例。

请参阅说明在 Angular 应用程序中注入服务的示例：https://stackblitz.com/edit/angular-service-injecton-test

Angular 文档：

https://angular.io/guide/dependency-injection#singleton-services

【参考方案2】：

当您导航到类似的内容时：

/showMeSomething/[id]

Angular 知道这个 id 改变了，所以它重新加载它的数据 (ngOnInit)。但是当你的地址还在时：

/showMeSomething

每次输入时它仍然是同一个地址。所以没有新数据到达那里（没有 ngOnInit）。

您是否使用某些东西来保持组件的活力？

对此有一点复杂的解决方案：您必须为您的项目创建一个单例服务并将其导入父组件和子组件。在那里添加一个布尔值来定义是否要重新加载子数据。然后做类似的事情：

navigateToChildComponent()
  this.mySingleton.reload = true;
  this.router.navigate['blabla/mycomponent'];

然后添加一些 ngDoCheck - 它一直有效。

ngDoCheck()
  if(this.mySingleton.reload)
    this.mySingleton.reload = false;
    this.getMyData();
   

但还是告诉我你是否使用了一些东西来让项目中的组件保持活力，以及你是如何使用它的。

https://angular.io/guide/lifecycle-hooks#lifecycle-sequence

【讨论】：

不，我没有使用任何东西来保持组件的活力。最初 /auth/:id1/:id2/:id3 被加载。这将重定向到另一个组件，该组件是功能的容器。现在根据条件，我想用不同的值重新加载上面的 url。我希望既然我们已经重定向到 /auth/... 因此容器中存在的所有组件都将被销毁，当我再次重定向时，它将加载新的值。