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'
      },
    ]
  },
...
];

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

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

Answer 2

我觉得我的赏金有点迟了但在这里实施。在你的app.component.ts

import { Router, NavigationEnd } from '@angular/router';

  constructor(private route: Router) {
    let flag = 0;
    this.route.events.subscribe((event) => {
      if(event instanceof NavigationEnd) {
        console.log(event);

        if(event.url.indexOf('?') === -1)  {
          this.route.navigate([event.url], { queryParams: { config: 'popular' } });
        }   
      }      
    })
  }
}

这里的stackblitz演示：https://stackblitz.com/edit/angular-router-basic-example-t5w3gz

如果需要，我们可以根据激活的路径进行修改。因此，您可以检查指定的查询参数是否存在，而不是使用简单的indexOf。

Answer 3

当用户使用Router类中的导航功能选择或设置配置时，您可以添加可选参数。导航到相同的路径不会重新创建组件或触发ngOnInit。添加可选参数不需要在应用程序中定义新路由，它看起来像这样：localhost：3000 / heroes; config = foo

大多数开发人员（包括我）都希望使用不同的参数导航到相同的路径应该重新创建组件，但这不是默认行为。你可以看看这个问题来阅读更多关于这个：Router Navigate does not call ngOnInit when same page或访问Angular文档进行路由：https://angular.io/api/router/RouterModule

要从URL读取参数，如果用户重新加载页面或复制粘贴网址，您可以订阅AcivatedRoute参数并读取参数。

Answer 4

目前无法在全球范围内进行设置。使用queryParamsHandling似乎是唯一的选择：

或者使用路由器时：

router.navigate（'/ login'，{queryParamsHandling：“preserve”}）queryParamsHandling的另一个可能选项是merge。