访问 Angular 7/8 布局组件和服务中的路由参数？

Question

我有一个多租户应用程序，它根据名为organization的路由参数识别租户。 我有应用程序的各个部分需要根据通过路由参数传入的组织来更改行为，但是我在访问除路由器导航到的组件之外的任何位置的参数时遇到了一些问题。

在我的应用程序的多个区域中，我放置了以下代码的变体：

export class OrganizationSidebarComponent implements OnInit {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
      console.log('[OrganizationSidebarComponent] ID IS ' + params['organization']);
      console.log(params);
    });
    this.route.paramMap.subscribe(paramMap => {
      console.log('[OrganizationSidebarComponent] ID from ParamMap: ' + paramMap.get('organization'));
    });
    console.log('[OrganizationSidebarComponent] ID using snapshot paramMap: ' + this.route.snapshot.paramMap.get('organization'));
    console.log('[OrganizationSidebarComponent] ID using snapshot params: ' + this.route.snapshot.params.organization);
  }
}

但是，当导航到页面时，输出如下所示：

我的路线设置如下：

const routes: Routes = [
  {
    path: 'Organization',
    component: OrganizationsLayoutComponent,
    children: [
      {
        path: ':organization',
        component: OrganizationDashboardComponent,
        canActivate: [AuthGuard]
      }
    ]
  }
];

在一个完美的世界中，我将能够访问来自某些注入服务的值，以便我拥有一个集中式获取服务，我可以利用它来获取所需的信息，但我只是在从任何地方检索路由参数时遇到问题不是要导航到的组件。

我怎样才能访问这些信息？

Answer 1

我建议以另一种方式（根据您的问题陈述）而不是在许多组件中读取组织并加载数据，而是在 app.component 中读取，如下所示

在 App.component.ts 中添加这个方法

  mergeRouteParams(router: Router): { [key: string]: string } {
    let params = {};
    let route = router.routerState.snapshot.root;
    do {
      params = { ...params, ...route.params };
      route = route.firstChild;
    } while (route);

    return params;
  }

然后在 ngOnInit 中执行此操作

    this.router.events.subscribe((e) => {
      if (e instanceof NavigationEnd) {
        const mergedParams = this.mergeRouteParams(this.router);
        console.log(mergedParams);
      }
    });

当然，添加private router: Router到您的构造函数

工作堆栈闪电战

https://stackblitz.com/edit/angular-merge-route-params

网址检查https://angular-merge-route-params.stackblitz.io/dictionary/dict/code

解决方案2

获取所有参数的另一种方法是使用路由配置

export const routingConfiguration: ExtraOptions = {
    paramsInheritanceStrategy: 'always',
};

@NgModule({
    imports: [RouterModule.forRoot(routes, routingConfiguration)],
    exports: [RouterModule],
})
export class AppRoutingModule { }

现在，如果您在 params 或 paramsMap 中注入route: ActivatedRoute ，您将获得来自父母的所有参数，包括此子路线