在Angular中,当使用惰性加载加载组件时,ngOnInit和constructor会在每次导航到该组件时被调用。这是因为Angular会重新创建组件实例,以确保每次导航到该组件时都具有最新的状态。
要解决这个问题,你可以使用路由守卫来延迟加载组件并保留其状态。下面是一个示例解决方案:
// app-routing.module.ts
const routes: Routes = [
{
path: 'home',
loadChildren: () => import('./home/home.module').then((m) => m.HomeModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// home.guard.ts
@Injectable()
export class HomeGuard implements CanActivate {
private homeComponent: HomeComponent | null = null;
constructor(private injector: Injector) { }
canActivate(): boolean {
if (!this.homeComponent) {
const factory = this.injector.get(ComponentFactoryResolver).resolveComponentFactory(HomeComponent);
const componentRef = factory.create(this.injector);
this.homeComponent = componentRef.instance;
}
return true;
}
}
// home.module.ts
const routes: Routes = [
{
path: '',
component: HomeComponent,
canActivate: [HomeGuard]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: [HomeGuard]
})
export class HomeModule { }
通过使用以上解决方案,ngOnInit和constructor在每次应用程序导航时都不会被调用,而是在第一次导航到Home组件时创建并缓存组件实例,并在后续导航时重用该实例。