angular 激活路由#queryParams与当前URL之间的差异,当处理空数组时

cu6pst1q  于 2个月前  发布在  Angular
关注(0)|答案(1)|浏览(24)

哪个@angular/*包是bug的来源?

router

这是个回归吗?

描述

我最近注意到一个情况,当使用navigate方法并在第一次有一个"正确"值后向查询参数传递一个空数组时,URL中的查询参数和Angular给出的查询参数会有所偏差,我不确定这是预期的行为还是不是。
一个简单的复现示例是这样的:

this.route.queryParams.subscribe((queryParams) => {
  console.log('queryParams', queryParams);
});

this.router.navigate([], {
  queryParams: {
    countries: [1, 2, 3],
  },
}).then(() => {
  this.router.navigate([], {
    queryParams: {
      countries: [],
    },
  });
});

在导航过程中,URL将没有任何查询参数,然而,日志会输出 { countries: [] }

请提供一个最小复现bug的链接

Stackblitz link

请提供您看到的异常或错误

  • 无响应*

请提供您发现此bug的环境(运行 ng version )

Angular CLI: 13.2.0
Node: 16.13.0
Package Manager: npm 8.1.0
OS: darwin x64

Angular: 13.2.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.0
@angular-devkit/build-angular   13.2.0
@angular-devkit/core            13.2.0
@angular-devkit/schematics      13.2.0
@schematics/angular             13.2.0
rxjs                            7.5.2
typescript                      4.5.5

还有其他信息吗?

  • 无响应*
f45qwnt8

f45qwnt81#

DefaultUrlSerializer 将数组转换为 countries=1&countries=2&countries=3 。当数组为空时,末尾的 filter 将去除空值:
angular/packages/router/src/url_tree.ts
第511行到第515行
| | returnArray.isArray(value) ? |
| | value.map(v=>${encodeUriQuery(name)}=${encodeUriQuery(v)}).join('&') : |
| | ${encodeUriQuery(name)}=${encodeUriQuery(value)}; |
| | }) |
| | .filter(s=>!!s); |
当然,这导致了你注意到的差异。我认为这不是有意为之,但我担心在 ActivatedRouteDefaultUrlSerializer 位置进行更改。使用 countries: [] 调用导航并稍后获取 undefined 可能令人意外(且破坏性),但将此特殊情况的 URL 更新为 counties=[] 也有些奇怪。

相关问题