0

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.

trebek1
  • 755
  • 1
  • 8
  • 28
  • Another thing to note is that ngAfterViewInit is never called before getting destroyed the first time. So, why would a component constructor get called and then destroy itself before the view ever gets initialized? – trebek1 Jan 29 '22 at 02:33

1 Answers1

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. If it is then it's suggesed to prefix components with something like app-, then anyone else reading the code get's whats going on. @Input() decorator should be used at selector, in your case it should be something like:

<tile [state]="someData"></tile>

So regarding your main problem. You want to navigate to an component using routerLink and passing data through while doing it. Problem is you you construct component in template <tile [state]=someData></tile> this is why for the first time your component gets created and data is correctly passed though. Then you navigate user to "path1/{{name}}/achildpath" and someData does not get passed on because you are now in on a new url, someData isn't passed on because previous template that did [state]=someData no longer exists to do it. Please refer to these examples:

https://stackblitz.com/edit/angular-pass-data-to-route-1-fhe267?file=src%2Fapp%2Fhome.component.ts

https://www.tektutorialshub.com/angular/angular-pass-data-to-route/

Joosep Parts
  • 5,372
  • 2
  • 8
  • 33
  • tile is a component – trebek1 Jan 31 '22 at 03:57
  • you can pass data through state https://angular.io/api/router/NavigationBehaviorOptions#state – trebek1 Jan 31 '22 at 04:00
  • The point of looking at ngAfterViewInit is because I am showing that the component is never rendered and then destroyed. Then it is re-rendered with state empty. The initial (destroyed) component was passed the correct values. – trebek1 Jan 31 '22 at 04:01
  • So regarding your main problem. You want to navigate to an component using routerLink and passing data through while doing it. Problem is you you construct component in template `` this is why for the first time your component gets created and data is correctly passed though. Then you navigate user to `"path1/{{name}}/achildpath"` and `someData` does not get passed on because you are now in on a new url, `someData` isn't passed on because previous template that did `[state]=someData` no longer exists to do it. I have updated my answer. – Joosep Parts Jan 31 '22 at 04:40
  • I'll accept the answer. I think that your explanation of the template is correct. The piece that I needed though was that the data is still available on history.state even after render cycle the second time! – trebek1 Jan 31 '22 at 05:03