在 angular 2 中如何保留查询参数并向路由添加额外的查询参数

Question

例如，我在路线/cars?type=coupe ，我想导航到具有其他查询参数的同一端点（但保留现有的）。 我正在尝试这样的事情

<a [routerLink]="['/cars']" [queryParams]="{model: 'renault'}" preserveQueryParams>Click</a>

保留初始查询参数 (type=cars) 但忽略添加的 (model=renault)。 这是预期的/正确的行为还是某种错误？ 看起来preserveQueryParams 优先于queryParams？ 有没有其他平滑的解决方案？

Answer 1

在 Angular 4+ 中， preserveQueryParams已被弃用，取而代之的是queryParamsHandling 。 选项是'merge'或'preserve' 。

代码示例（在NavigationExtras ）：

this.router.navigate(['somewhere'], { queryParamsHandling: "preserve" });

模板内示例：

<a [routerLink]="['somewhere']" queryParamsHandling="merge">

Answer 2

不幸的是，它只是以这种方式工作：

const q = preserveQueryParams ? this.currentUrlTree.queryParams : queryParams;

您可以尝试添加这样的自定义指令：

@Directive({selector: 'a[routerLink][merge]'})
export class RouterLinkDirective implements OnInit
{

    @Input()
    queryParams: {[k: string]: any};

    @Input()
    preserveQueryParams: boolean;


    constructor(private link:RouterLinkWithHref, private route: ActivatedRoute )
    {
    }

    public ngOnInit():void
    {
        this.link.queryParams = Object.assign(Object.assign({}, this.route.snapshot.queryParams), this.link.queryParams);
        console.debug(this.link.queryParams);
    }
}


<a [routerLink]="['/cars']" merge [queryParams]="{model: 'renault'}">Click</a>

---

更新：请参阅下面的 DarkNeuron 答案。

Answer 3

有一个悬而未决的问题，并且已经有一个拉取请求来使preserveQueryParams成为路由器设置而不是每个导航设置

• https://github.com/angular/angular/issues/12664
• https://github.com/angular/angular/pull/12979
• https://github.com/angular/angular/issues/13806

Answer 4

这可以使用relativeTo和queryParamsHandling属性来处理。

像这样尝试：

constructor(private _route: ActivatedRoute, private _router: Router)


this._router.navigate(
    [],
    {
      relativeTo: this._route,
      queryParams: { model: 'renault' },
      queryParamsHandling: 'merge'
 });