路由到父路由时销毁所有子组件
Destroy all sub-components when routing to a parent route
我有一个应用程序，其中我的父路由重定向到加载整个视图的子路由。
这里我有很多组件从服务器获取数据并渲染它。
基于某些条件，我重定向到具有不同参数的父路由。子路由再次加载传递给它的刷新数据。
parent ---> child -------------------Components getting data from Server ----
<-----Different params------------
但是在子路由中，某些组件仍然显示旧数据。通常他们从服务器获取数据来渲染它。
在我看来，它们在重新路由到父路由时并未被破坏，因此使用旧数据呈现而不是从服务器获取数据。
关于可能出现的问题有什么建议吗？
编辑：
看来这不是问题所在。重新布线时，组件会被正确销毁。问题在于未重新创建的服务。
Relevant Question
当您导航到类似以下内容时：
/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();
}
}
但还是告诉我你是否在你的项目中使用了一些东西来保持组件存活，以及你是如何使用它的。
不会重新创建服务，因为它们默认是单例实例。
根据 Angular 的文档：
Services are singletons within the scope of an injector. There is at
most one instance of a service in a given injector.
There is only one root injector, and the UserService is registered
with that injector. Therefore, there can be just one UserService
instance in the entire app, and every class that injects UserService
get this service instance.
However, Angular DI is a hierarchical injection system, which means
that nested injectors can create their own service instances. Angular
creates nested injectors all the time
解决方案：
如果你真的想在每个组件中创建一个新的服务实例，你必须在组件定义时为它们声明一个提供者。
@Component({
selector: 'child2',
templateUrl: './child2.component.html',
// create a new instance of the service
providers: [AngularService]
})
Component injectors are independent of each other and each of them
creates its own instances of the component-provided services.
...
When Angular destroys one of these component instances, it also
destroys the component's injector and that injector's service
instances.
查看此示例，该示例说明了在 Angular 应用程序中注入服务：https://stackblitz.com/edit/angular-service-injecton-test
Angular 的文档：
https://angular.io/guide/dependency-injection#singleton-services
我有一个应用程序，其中我的父路由重定向到加载整个视图的子路由。 这里我有很多组件从服务器获取数据并渲染它。
基于某些条件，我重定向到具有不同参数的父路由。子路由再次加载传递给它的刷新数据。
parent ---> child -------------------Components getting data from Server ----
<-----Different params------------
但是在子路由中，某些组件仍然显示旧数据。通常他们从服务器获取数据来渲染它。
在我看来，它们在重新路由到父路由时并未被破坏，因此使用旧数据呈现而不是从服务器获取数据。
关于可能出现的问题有什么建议吗？
编辑：
看来这不是问题所在。重新布线时，组件会被正确销毁。问题在于未重新创建的服务。
Relevant Question
当您导航到类似以下内容时：
/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();
}
}
但还是告诉我你是否在你的项目中使用了一些东西来保持组件存活，以及你是如何使用它的。
不会重新创建服务，因为它们默认是单例实例。
根据 Angular 的文档：
Services are singletons within the scope of an injector. There is at most one instance of a service in a given injector.
There is only one root injector, and the UserService is registered with that injector. Therefore, there can be just one UserService instance in the entire app, and every class that injects UserService get this service instance.
However, Angular DI is a hierarchical injection system, which means that nested injectors can create their own service instances. Angular creates nested injectors all the time
解决方案：
如果你真的想在每个组件中创建一个新的服务实例，你必须在组件定义时为它们声明一个提供者。
@Component({
selector: 'child2',
templateUrl: './child2.component.html',
// create a new instance of the service
providers: [AngularService]
})
Component injectors are independent of each other and each of them creates its own instances of the component-provided services.
...
When Angular destroys one of these component instances, it also destroys the component's injector and that injector's service instances.
查看此示例，该示例说明了在 Angular 应用程序中注入服务：https://stackblitz.com/edit/angular-service-injecton-test
Angular 的文档：
https://angular.io/guide/dependency-injection#singleton-services