如何在Angular中的延迟加载模块中获取路由参数

Question

我有下面这样的路由，其中传递id作为参数。因此，我必须在模块内部使用相同的ID，以便根据路由参数加载独立的翻译文件。

const routes: Routes = [
{
path: 'flight/:id', loadChildren: () => import('./layout/base/base.module').then(m => m.BaseModule)
},
];

现在在BaseModule文件中，我必须使用：id数据来加载一些数据是否有任何方法可以读取或获取BaseModule文件中的路由数据

Answer 1

您可以使用此配置从父路由访问参数：

RouterModule.forRoot(appRoutes, {
paramsInheritanceStrategy: 'always'
})

现在你可以在base.module中访问：id。但使用这种方法时，最好更具体地命名你的params。

另一种方法是提升路由器状态：

export function extractRoute(route: ActivatedRoute, component: any): ActivatedRoute {
if (route && route.component !== component) {
return extractRoute(route.parent, component);
}
return route;
}

您可以将此功能与保存与路由器配置相对应的路由器出口的组件一起使用。例如

AppComponent->RouterOutlet->
const routes: Routes = [
{
path: 'flight/:id', loadChildren: () => import('./layout/base/base.module').then(m => m.BaseModule)
},
];

您可以使用以下属性访问id属性：

constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
const id = extractRoute(activatedRoute, AppComponent).snapshot.params.id;
}

Answer 2

在您的BaseModule中，您可以订阅路由器事件，然后检查ActivatedRoute快照以获得如下id：

export class BaseModule {
constructor( active: ActivatedRoute, router: Router) {
router.events
.pipe(
filter(e => e instanceof NavigationEnd),
filter((ne: NavigationEnd) => ne.url.includes("flights/"))
)
.subscribe(e => {
console.log(active.firstChild.snapshot.params.id);
});
}
}

StackBlitz