Angular 5 全局查询参数答案

【问题标题】：Angular 5 global query parameterAngular 5 全局查询参数
【发布时间】：2019-05-10 13:15:54
【问题描述】：

我想为应用程序的每个路径添加一个全局查询参数（类似于 /my/path?config=foo）。我不想使用 perserve 查询参数选项，因为它保留了所有查询参数，而我只想保留这个特定的参数。

我的应用程序确实以不同的配置运行，运行它的用户可以选择这些配置。此选项当前保存在配置服务中，并且在关闭或重新加载选项卡/窗口时消失。我无法将选择保存在本地存储或会话中，因为可以在同一浏览器的多个选项卡中打开不同的配置（据我所知，本地存储在浏览器的所有选项卡中都是全局的 - 如果它是不在隐身模式或类似模式下）。

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

因此，一旦用户选择了配置设置，我想自动将“config”查询参数附加到应用程序的每个 url。

【问题讨论】：

这是一个路由参数。 angular.io/guide/router#route-parameters
为什么不在 localStorage 中维护这个状态？

标签： angular routing query-parameters

【解决方案1】：

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

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

要在用户重新加载页面时从 URL 读取参数或复制粘贴 url，您可以订阅 AtivatedRoute 参数并读取参数。

【讨论】：

【解决方案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。

【讨论】：

如果我返回上一页，条件将返回 true，我们将被重定向到同一页面，请同时提供此解决方案

【解决方案3】：

目前没有办法全局设置。使用 queryParamsHandling 似乎是唯一的选择：

或者使用路由器时：

router.navigate('/login', { queryParamsHandling: "preserve" }) queryParamsHandling 的另一个可能选项是合并。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：