Angular 延迟加载的组件在导航时重新渲染

Question

Our application is setup so users navigating to a certain set of routes are lazy loaded like below:

{
  path: path1, 
  component: Cmp1,
  loadChildren: () => LazyLoadedModule,
}

We use a router link to navigate to one of these lazy loaded components like this...

<tile
    routerLink="path1/{{name}}/achildpath"
    [state]=someData>
    ...
</tile>

I notice when clicking on this tile the path + lazy loaded component attempts to load. The correct state is passed in initially. However, the component is destroyed immediately and then the component loads again with the state undefined. (loads without the state data but loads the correct component)? The question is why is the component reloading and destroying itself on first render? Could this be a problem with the router outlet or the lazy loaded components. Our router outlet for the lazy loaded component is defined in Cmp1.

Answer 1

ngAfterViewInit is never called before getting destroyed ngAfterViewInit never gets called before destroy. OnDestroy is what gets called before destroy. But I think you mean why ngAfterViewInit never gets called before comp is destroyed. It can happen when comp is destroyed before cycle reaches there, or it's being called twice etc. https://blog.logrocket.com/angular-lifecycle-hooks/ Although without seeing rest of the code, an exact problem is just a guess for now.

Unless tile is an component, you can't use Input/Output to transfer data like that. @Input() decorator should use at selector, in your case it should be something like:

<app-cmp1 [state]="someData"></app-cmp1>

I am not entirely sure, but I think you can't share data like that between parent->child though routing. You could - (like I showed above) directly from parent->child but not via router. I would suggest to move data transfer/management to a service instead.

So regarding your main problem I hope my explanation is enough. Here is a working repo with a service instead. https://stackblitz.com/edit/angular-pqrqvx?file=src%2Fapp%2Forders%2Forders.component.ts