Trong góc 2 cách duy trì thông số truy vấn và thêm thông số truy vấn bổ sung vào tuyến

Question

Ví dụ: Tôi đang trên tuyến /cars?type=coupe và tôi muốn điều hướng đến cùng điểm cuối với thông số truy vấn bổ sung (nhưng vẫn giữ nguyên tham số hiện tại). Tôi đang thử một cái gì đó như thế này

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

Thông số truy vấn ban đầu được giữ nguyên (loại = xe) nhưng bị bỏ qua (model = renault). Đây có phải là hành vi mong đợi/đúng hay là một loại lỗi nào đó? Có vẻ như preserveQueryParams có ưu tiên hơn queryParams? Có giải pháp nào khác trơn tru không?

Answer 1

Nó chỉ hoạt động theo cách này không may:

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

Bạn có thể cố gắng thêm chỉ thị tùy chỉnh như thế này:

@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> 

Answer 2

Có một vấn đề mở và cũng đã yêu cầu kéo để làm cho preserveQueryParams cài đặt bộ định tuyến thay vì mỗi cài đặt điều hướng

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

Answer 3

Trong góc 4 và góc 5, preserveQueryParams đã phản đối ủng hộ queryParamsHandling. Các tùy chọn là 'merge' hoặc 'preserve'.

In-mã ví dụ (sử dụng trong NavigationExtras):

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

In-mẫu ví dụ:

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