Angular：redirectTo 中的参考查询参数答案

【问题标题】：Angular: Reference query params in redirectToAngular：redirectTo 中的参考查询参数
【发布时间】：2018-01-12 20:28:30
【问题描述】：

我想提供一个基于查询参数重定向到给定页面的路径。例如：

/redirect?page=hero&id=1

应该重定向到：

/hero/1

有没有办法在路由配置中做到这一点？比如：

{ path: 'redirect?page&id', redirectTo: ':page/:id' }

我可以让 redirectTo 尊重路径参数，但不能尊重查询参数。有什么想法吗？

【问题讨论】：

标签： javascript angular angular-router

【解决方案1】：

不，没有办法通过配置来做到这一点。你看，Angular 的路由器没有明确定义查询参数——任何 url 都可以有任意数量的查询参数，并且路径 '/page/id' 和 '/page/id?key=value' 在 Angular 中被视为相同并映射到同一个组件。还有其他更麻烦的解决方法。一种是创建一个虚拟组件，并基于组件的ngOnInit 方法中的ActivatedRoute.queryParams Observable 进行重定向。您可以很容易地看出为什么这是一个坏主意。另一种方法是创建一个解析器，这样您也许可以关闭组件声明并从解析器重定向，再次基于ActivatedRoute.queryParams Observable，这看起来更干净。

但我真的不明白为什么在前端应用程序中需要这样的路由，如果您希望某人访问“/page/id”，那么只需将他们导航到该页面，无需任何中介技巧。

【讨论】：

有道理。不幸的是，进行导航的遗留应用程序仅支持动态查询参数而不支持路径参数。 ://
请用UrlMatcher解决方案检查我的答案

【解决方案2】：

您可以尝试使用redirectTo: '/:page/:id' 并使用自定义UrlMatcher() 提供从您的URL 中提取的page 和id 值：

...

const appRoutes: Routes = [
  {
    path: 'hero/:id',
    component: TestComponent
  },
  {
    matcher: redirectMatcher,
    redirectTo: '/:page/:id'
  }
];

...

/**
 * custom url matcher for router config
 */
export function redirectMatcher(url: UrlSegment[]) {
  if (url[0] && url[0].path.includes('redirect')) {
    const path = url[0].path;
    // sanity check
    if (path.includes('page') && path.includes('id')) {
      return {
        consumed: url,
        posParams: {
          page: new UrlSegment(path.match(/page=([^&]*)/)[1], {}),
          id: new UrlSegment(path.match(/id=([^&]*)/)[1], {})
        }
      }
    }
  }
  return null;
}

堆栈闪电：https://stackblitz.com/edit/angular-t3tsak?file=app%2Ftest.component.ts

使用redirectTo: ...时还有一个问题，活动链接没有更新，实际上isActive标志没有设置为true，当acive重定向链接不是红色时，在我的stackblitz上可以看到

【讨论】：