代码之家 › 专栏 › 技术社区 › harsrawa

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

rerender parent-child components routing angular

harsrawa · 技术社区 · 6 年前

我有一个应用程序,其中我有我的父路由,它重定向到一个子路由,其中加载了整个视图。在这里,我有许多组件从服务器获取数据并将其呈现。

根据某些条件,我将重定向到具有不同参数的父路由。子路由再次加载了传递给它的刷新数据。

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

但是在子路由中,有一些组件仍然显示旧数据。通常他们从服务器获取数据来呈现它。

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

有什么问题吗?

编辑:

这似乎不是问题所在。重新布线时,组件会被正确销毁。该问题与未重新创建的服务有关。

Relevant Question

2 回复 | 直到 6 年前

Rodrigo 6 年前

服务将不会被重新创建,因为默认情况下它们是单例实例。

根据角度文件:

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

只有一个根注入器,用户服务已注册用那个注射器。因此,可能只有一个用户服务整个应用程序中的实例,以及每个注入用户服务的类获取此服务实例。

然而,角DI是一个分层的注入系统,这意味着嵌套的注入器可以创建自己的服务实例。角度始终创建嵌套的喷油器

解决方案:

如果确实要在每个组件中创建服务的新实例,则必须在组件定义中为它们声明一个提供程序。

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

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

部件喷油器彼此独立,且各自独立创建组件提供的服务的自己的实例。

…

当Angular破坏其中一个组件实例时,它还损坏部件的喷油器和该喷油器的维修实例。

请参阅这个示例,它演示了在角度应用程序中注入服务: https://stackblitz.com/edit/angular-service-injecton-test

角度文件:

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

Åukasz Kochanowski 6 年前

当您导航到以下内容时:

/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