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设置路由器而不是每个导航设置

Answer 4

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

尝试这样：

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


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

在角度2中如何保留查询参数并添加其他查询参数以路由

4 个答案: