时间戳

首页 > 解决方案 > Angular 延迟加载模块重新加载应用程序

angular - Angular 延迟加载模块重新加载应用程序

问题描述

我懒加载一个模块。当更改指向它的路由时，整个应用程序重新加载并再次调用 app.component ngOnInit() 函数（这是不可取的，因为我订阅了服务器并且只需要这样做一次）。我发现在不刷新整个应用程序的情况下加载模块称为“热模块重新加载”（HMR），并且有一些包应该对此有所帮助，但是我希望这将由 Angular 本身处理。此问题仅发生在延迟加载的模块中。

app.component.html

<div>
<router-outlet></router-outlet>
</div>

app.component.ts

ngOnInit(): void {
  console.log('App init');
  this.realtimeService.subscripbeToRT(); // Should be called only once
}

app.module.ts

const routes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'test',
        loadChildren: () => import('./test/test.module').then(m => m.TestModule)
    },
    { path: '**', redirectTo: '' }
];

@NgModule({
      declarations: [
         ...
      ],
      imports: [
         RouterModule.forRoot(routes),
         ...
      ],
      bootstrap: [AppComponent]
  })

  export class AppModule { }

在上面的示例中，实时服务在路由更改到 /test 页面时被调用。有谁知道加载惰性模块时如何禁用整个应用程序刷新？

谢谢

标签： angularlazy-loadingangular-routing

解决方案

我有同样的问题，因为我在我的顶栏中而不是使用 click=goto(/blah) 并且在 ts 文件中这样做 this.router.navigate(url) 解决了这个问题

推荐阅读