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

【问题标题】：How we can fetch route parameters in lazily loaded module in Angular我们如何在 Angular 的延迟加载模块中获取路由参数
【发布时间】：2020-09-30 11:38:55
【问题描述】：

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

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

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

【问题讨论】：

标签： angular routes angular8 angular-lazyloading

【解决方案1】：

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

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

【讨论】：

【解决方案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

【讨论】：