CODEWITHSUNDEEP
angularangular2-routing
user1024112
user1024112

Reputation: 306

Angular2 - ngOnDestroy() not called on similar route

I have an Angular2 app with a route like this:

{
  path: '',
  component: ContentComponent,
  children: [
    {
      path: 'folder/:folderId',
      resolve: {              
        currentFolder: CurrentFolderResolver,
      },
      children: [
        {
          path: '',
          resolve: {
            folderStructure: FolderStructureResolve,
          },
          component: FolderOverviewComponent,
        },
        {
          path: 'users',
          component: UsersComponent,
        }
      ]
    }
  ]
}

When navigating from a route like /folder/123 to /folder/456, Angular will not trigger ngOnDestroy() in the FolderOverviewComponent. Navigating to /folder/456/users will do.

In other words, it seems like Angular does not destroy the component if the route does not change (ignoring the dynamic part of :folderId). This seems reasonable, nevertheless I need to clean up things in ngOnDestroy().

Can I configure Routes to call destroy each time I navigate to a new route (i.e. with a different parameter)?

Upvotes: 8

Views: 8494

Answers (1)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657871

That's by design. If only a route parameter changes which leads to the same route being used, the component is not destroyed and recreated but reused.

You can subscribe to params changes to be able to execute code when the route was changed:

constructor(router: ActivatedRoute) {
  router.params.subscribe(param => routeChanged(param['folderId']));
}

There are plans to provide more flexibility in the future, but currently that's the way to go.

See also https://angular.io/guide/router#activated-route-in-action

Upvotes: 7

Related Questions