Angular 2 Новый маршрутизатор: изменение/установка параметров запроса

У меня есть компонент, зарегистрированный в /contacts, который отображает список контактов. Я добавил <input [value]="searchString"> для фильтрации отображаемого списка.

Теперь я хотел бы отобразить searchString в URL-адресе в виде параметра Query Param. (Использование New Router 3.0.0 RC2)

Официальные документы (https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters) показывают, как использовать router.navigate для изменения queryParams. Но это кажется неудобным, потому что я просто хочу изменить queryParams, не зная, к какому маршруту я сейчас: router.navigate(['/contacts'], {queryParams:{foo:42}})

(Я знаю, что он не перезагружает компонент, если я просто изменяю queryParams, но все же это не так, как писать)

После некоторых попыток я понял, что router.navigate([], {queryParams:{foo:42}}) работает. Это чувствует себя лучше.

Но я все еще не уверен, правильно ли это. Или если я пропустил какой-то метод для этого.

Ответы

Ответ 1

Если вы посмотрите на объявление класса Router, вы можете найти следующее:

Перейдите на основе предоставленного массива команд и отправной точки. Если начальный маршрут не указан, навигация является абсолютной.

Также он возвращает обещание со значением, если навигация прошла успешно или нет.

navigate (команды: any [], дополнительные функции: NavigationExtras): Promise;

команды - массив команд для маршрутизатора, куда следует перемещаться;

extras - необязательный параметр, в котором вы указываете дополнительные свойства, такие как параметры запроса

Если вы изучите класс NavigationExtras, вы обнаружите, что не только вы можете указать параметры запроса для маршрутизатора, но и установить сохранение предыдущих параметров запроса и т.д.

Я использовал метод навигации следующим образом:

this.router.navigate([], {
        queryParams: objectWithProperties,
        relativeTo: this.activeRoute
    });

где пустой массив означает, что местоположение не изменяется, а в дополнительных параметрах я определяю параметры запроса, используя объект со свойствами.

Angular разрешает этот объект примерно так:

siteBasePath/routerDirectory? PropertyName = PropertyValue

Вот более полезная информация и примеры, которые я нашел очень полезными: http://vsavkin.tumblr.com/post/145672529346/angular-router

Я надеюсь, что кто-то найдет это полезным.