В угловом 2 как сохранить параметры запроса и добавить дополнительные параметры запроса к маршруту

Question

Например, я нахожусь на маршруте /cars?type=coupe, и я хочу перейти к той же конечной точке с дополнительными параметрами запроса (но сохраняя существующий). Я пытаюсь что-то вроде этого

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

Начальные параметры запроса сохраняются (тип = каров), но добавлены те (модель = Рено) игнорируются. Это ожидаемое/правильное поведение или какая-то ошибка? Похоже, что preserveQueryParams имеет приоритет над queryParams? Есть ли другое гладкое решение?

Answer 1

Он просто работает таким образом, к сожалению:

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> 

Answer 2

Существует открытый вопрос, а также уже запрос тянуть, чтобы сделать preserveQueryParams настройка маршрутизатора вместо каждой навигационной установки

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

Answer 3

В угловыми 4 и 5 Угловая, preserveQueryParams устарели в пользу queryParamsHandling. Возможны либо 'merge', либо 'preserve'.

В-коде пример (используется в NavigationExtras):

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

В-шаблона, например:

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