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

【问题标题】：Accessing route parameters in Angular 7/8 layout components and services?访问 Angular 7/8 布局组件和服务中的路由参数？
【发布时间】：2020-08-28 03:01:34
【问题描述】：

我有一个多租户应用程序，它根据称为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]
      }
    ]
  }
];

在一个完美的世界里，我可以从一些注入的服务中访问值，这样我就有一个集中的获取服务，我可以利用它来获取所需的信息，但我只是在检索路由参数时遇到了问题从不是被导航到的组件的任何地方。

如何访问这些信息？

【问题讨论】：

看看这个当前的问题。 stackoverflow.com/questions/40219790/…

标签： javascript angular typescript multi-tenant

【解决方案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，您将获得来自父母的所有参数，包括这条子路线

【讨论】：