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

当用户选择或设置配置时，您可以添加可选参数使用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 3

我想我的赏金来得有点晚，但是在这里实现。在您的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 4

当前无法全局设置。使用queryParamsHandling似乎是唯一的选择：

或使用路由器时：

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

Angular 5全局查询参数

4 个答案: