0

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

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

我们使用路由器链接导航到这些延迟加载的组件之一，如下所示......

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

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

4

1 回答 1

1

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

除非tile是一个组件，否则您不能使用输入/输出来传输这样的数据。如果是这样，那么建议在组件前面加上类似的前缀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/

于 2022-01-29T05:04:43.970 回答