Angular 5全局查询参数

Question

我想为应用程序的每个路径添加一个全局查询参数(类似于/ my/path？config = foo).我不想使用perserve query params选项,因为它保留了所有查询参数,我只想保留这个特定的查询参数.

我的应用程序使用不同的配置运行,可以由运行它的用户选择.此选项当前保存在配置服务中,并在关闭或重新加载选项卡/窗口时消失.我无法在本地存储或会话中保存选择,因为可以在同一浏览器的多个选项卡中打开不同的配置(据我所知,本地存储通过浏览器的所有选项卡是全局的 - 如果是不是隐身模式或类似的).

但我希望我的用户可以选择复制当前网址并将其发送给其他人,他们获得与发送链接的用户完全相同的数据和配置.

因此,我想在用户选择配置设置后立即自动将"config"查询参数附加到应用程序的每个URL.

Answer 1

我的建议是重新定义你的路由策略，并为你想要使用配置的每个组件使用相同的路由参数。

以具有特殊参数的方式定义路由：

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'example-path,
    canActivate: [AuthGuard],
    children: [
      {
        path: ':example-parameter-path',
        canActivate: [AuthGuard],
        children: [
          {
            path: ':configuration',
            component: YourComponent
          },
      {
        path: '',
        component: YourComponent,
        pathMatch: 'full'
      },
    ]
  },
...
];

然后，在您想要访问该配置的组件中，您可以从Activated路由中获取它：

 private subscribeToUrlChange() {
    this.activatedRoute
      .params
      .subscribe(
        params => {
          console.log([params['configuration'])
        }
      );
  }