访问 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 添加到构造函数中

工作 stackblitz

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

Url 检查 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 { }

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

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

Accessing route parameters in Angular 7/8 layout components and services?

javascript

multi-tenant

typescript

angular

工作 stackblitz

解决方案 2