在Angular 9中,惰性加载模块默认情况下会自动启用路由出口,而且无法直接停用。不过,你可以通过以下方法来解决这个问题:
empty-router-outlet.component.ts
,并添加以下代码:import { Component } from '@angular/core';
@Component({
template: '',
})
export class EmptyRouterOutletComponent { }
然后,在你的惰性加载模块的路由配置中,将这个组件设置为惰性加载模块的路由路径为空的路由:
const routes: Routes = [
{
path: '', // 空路径
component: EmptyRouterOutletComponent, // 使用空的路由出口组件
},
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LazyModule { }
这样,当访问惰性加载模块时,路由将会使用空的路由出口组件。
然后,在你的惰性加载模块的路由配置中,将路由路径设置为空,但是指定具名路由出口为lazyOutlet
:
const routes: Routes = [
{
path: '', // 空路径
component: LazyComponent, // 惰性加载模块的组件
outlet: 'lazyOutlet', // 使用具名路由出口
},
// 其他路由配置
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class LazyModule { }
这样,当访问惰性加载模块时,路由将会使用具名路由出口来加载组件。
无论哪种方法,你都可以在惰性加载模块上停用路由出口。