nzTabLink通过带参数路由创建Tab后，所有Tab都会带有此参数

jaune162 commented 3 months ago

Reproduction link

https://stackblitz.com/~/github.com/jaune162/stackblitz-starters-i92r4w

Steps to reproduce

https://stackblitz.com/~/github.com/jaune162/stackblitz-starters-i92r4w 中已给出代码。

点击左侧菜单中的 Tab1，会创建一个名称为 Tab1 的 tab
点击 Tab1 页面中的 Go To Tab2 with params 按钮，会创建 Tab2 的 tab。这个tab的链接中带有了一个参数 ?id=001

这是会发现当鼠标指向任何一个tab时，浏览器下方提示的链接中都带有 ?id=001 的参数。

app.component.ts 中的 tabs 变量内容如下：

[
  {
    closeable: false,
    name: '首页',
    queryParams: {},
    routerLink: '/welcome'
  },
  {
    closeable: false,
    name: 'Tab1',
    queryParams: {},
    routerLink: '/tabs/page1'
  },
  {
    closeable: false,
    name: 'Tab2',
    queryParams: {id: '001'},
    routerLink: '/tabs/page2'
  }
]

What is expected?

首页和 Tab1 这连个tab中不应该带有参数，并且点击tab跳转时，不应该有参数。

What is actually happening?

所有 tab 中都会带有参数

Environment	Info
ng-zorro-antd	18.0.0
Browser	谷歌浏览器

zorro-bot[bot] commented 3 months ago

Translation of this issue:

After NZTABLINK creates TAB with a parameter routing, all TAB will bring this parameter

REPRODUCTION LINK

[https://stackblitz.com//github.com/jaune162/stackBlitz-tarters-i92r4w] S-I92R4W)

STEPS To Reproduce

https://stackblitz.com/~/github.com/jaune162/stackblitz-starters- I92R4W has given code.

Click the tab1 in the menu on the left, and will create a TAB named tab1
Click the Go to Tab2 with Params button on the Tab1 page to create a TAB of Tab2 . There is a parameter in the link of this tab ? ID = 001

This is to find that when the mouse pointed at any Tab, the link prompted below the browser has parameters with ? ID = 001.

app.component.ts`` tabs variable content is as follows:

`json [ {{ closeable: false, name: 'Homepage', queryparames: {}, routerlink: '/welcome' }, {{ closeable: false, name: 'tab1', queryparames: {}, routerlink: '/tabs/page1' }, {{ closeable: false, name: 'tab2', queryparames: {id: '001'}, routerlink: '/tabs/page2' } ] `

What is exfected?

The homepage and TAB1 should not have parameters in a tab, and when clicking TAB to jump, there should not be parameters.

What is actually happy?

All TAB will have parameters

ENVIRONMENT	Info
ng-zorro-antd	18.0.0
Browser	Google Chrome

jaune162 commented 2 months ago

问题在于 queryParamsHandling="merge" 这个参数上，此参数会合并现有参数和已有参数，最终导致打开的页面越多追加的参数就越多。

文档地址：https://angular.dev/api/router/QueryParamsHandling#

删除此参数即可解决上述问题。

NG-ZORRO / ng-zorro-antd