Angular 延迟加载组件在导航时重新呈现

Question

我们的应用程序已设置好，因此导航到一组特定路线的用户会延迟加载，如下所示：

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

我们使用路由器 link 导航到这些延迟加载的组件之一...

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

我注意到单击此图块时路径 + 延迟加载组件尝试加载。最初传入正确的状态。但是，该组件会立即被销毁，然后该组件会以未定义状态再次加载！（加载时没有状态数据但加载了正确的组件）。问题是为什么组件会在第一次渲染时重新加载并自行销毁？这可能是路由器插座或延迟加载组件的问题吗？我们用于延迟加载组件的路由器出口在 Cmp1 中定义。

Answer 1

ngAfterViewInit is never called before getting destroyed ngAfterViewInit 在销毁之前永远不会被调用。 OnDestroy 是在销毁之前调用的。但我认为你的意思是为什么 ngAfterViewInit 在 comp 被销毁之前从未被调用过。当 comp 在循环到达那里之前被销毁，或者它被调用两次等时，它可能会发生。https://blog.logrocket.com/angular-lifecycle-hooks/ 虽然没有看到其余代码，但确切的问题现在只是一个猜测。

除非 tile 是一个组件，否则您不能使用 Input/Output 那样传输数据。如果是，则建议在组件前加上 app- 之类的前缀，然后阅读代码的任何其他人都会知道发生了什么。 @Input() 装饰器应该用在选择器上，在你的情况下它应该是这样的：

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

关于你的主要问题。您想要使用 routerLink 导航到一个组件，并在执行此操作时传递数据。问题是您在模板 <tile [state]=someData></tile> 中构造组件，这就是为什么第一次创建组件并正确传递数据的原因。然后您将用户导航到 "path1/{{name}}/achildpath" 并且 someData 不会被传递，因为您现在在一个新的 url 上，someData 不会被传递，因为以前的模板确实[state]=someData 已经不存在了。请参考这些例子：

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/

Angular 延迟加载组件在导航时重新呈现

Angular Lazy Loaded Component Re-renders on navigation

angular

angular-routing

angular-lazyloading