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

问题描述

我有如下路由，其中​​将id作为参数传递。因此，我必须在模块内部使用相同的ID来基于路由参数加载隔离的翻译文件。

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

现在在BaseModule文件中，我必须使用：id数据来加载一些数据。 有什么办法可以读取或获取BaseModule文件中的路由数据。

解决方法

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

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

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

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

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;
}

,

在您的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