0

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

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

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

4

2 回答 2

0

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

于 2020-09-30T13:49:36.687 回答
0

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

  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;
}
于 2020-09-30T12:07:59.190 回答