Привязка параметров URL через RouterLink в приложении Angular

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

private onFilterProcessed(value: any, type: string, body, page)
{
    if (type === 'zip')
    {
        this.processType('addresses.zip', value);
    } if (type === 'location')
    {
        this.processType('addresses.city', value);

    this.filtersService.getByCategory(
        page, this.pagesize, this.body)
        .subscribe(resRecordsData => {
            let data = resRecordsData.data;
        },
        responseRecordsError => this.errorMsg = responseRecordsError);
}

Это позволяет мне передавать некоторые параметры фильтра в вызов api как часть тела запроса POST. Это вернет результаты, в которых перед возвратом данных передаются выбранные пользователем фильтры.

Все работает так, как ожидалось. Когда пользователь возвращается «назад» к ранее загруженному компоненту, его предыдущие выбранные фильтры будут переданы в вызов API, поэтому «страница» будет выглядеть так же, как когда они были на этой странице / компоненте в последний раз.

Однако у меня также есть несколько разделов в моем приложении, где я загружаю компоненты через routerLink. Изначально они выглядели так:

<a routerLink="/customer-history" routerLinkActive="selected">Customer History</a>

Дело в том, что теперь, когда у меня есть параметры фильтра в URL-адресе, это само по себе не сработает, потому что каждый раз, когда я нажимаю на эти конкретные ссылки, он стирает URL-адрес и повторно загружает его только с идентификатором страницы «customer- история "- потому что это то, что я сейчас говорю ему делать.

Если, например, фильтры использовались пользователем для фильтрации результатов по городу, URL-адрес выглядел бы следующим образом:

http://localhost:4200/customer-history;locations=true;locations_place=Seattle

Итак, проблема в том, что если бы они щелкнули мышью и затем вернулись на эту страницу / компонент по ссылке routerLink, вместо получения отфильтрованных данных для этой страницы он загрузит это:

http://localhost:4200/customer-history

Итак, мой вопрос о том, как передать эти параметры URL-адреса как часть routerLink. Я предполагаю, что это будет выглядеть примерно так, с квадратными скобками для привязки:

<a [routerLink]="['/customer-history', getParams()]" routerLinkActive="selected">Customer History</a>

Я не понимаю, как я получаю эти конкретные параметры URL (только параметры фильтра, а не имя компонента / страницы) и передаю их через привязку, подобную этой.

Я знаю, что Angular делает доступным активированныйRoute.snapshot, который я мог бы получить вот так, для передачи в getParams():

getParams()
{
    return this.activatedRoute.snapshot;
}

Но это вернет полный URL-адрес, а не только часть параметров фильтра, что мне нужно. Итак, как мне получить нужную мне часть URL-адреса и передать ее сюда, чтобы добавить в «историю клиентов» в URL-адресе? Как бы это выглядело в базовой реализации?


typescript javascript angular routerlink routing
person Muirik    schedule 02.10.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Чтобы решить эту проблему, вместо использования routerLink в шаблоне, необходимо передать функцию, которая разрешает правильную страницу / компонент при подписке и переходе на эту страницу и все соответствующие параметры URL.

Для этого я делаю это в представлении:

<a (click)="goToCustomerHistory()">Customer History</a>

И эта функция в компоненте выглядит так:

goToCustomerHistory()
{
    this.route.params.subscribe(
        (params: any) => {
            this.page = params['page'];
            this.locations = params['locations'];
            this.locations_place = params['locations_place'];
        }
    );
    this.router.navigate(
        ['/customer-history', {
            page: this.page,
            locations = this.locations;
            locations_place = this.locations_place;
        }]);
}

И, конечно же, вам также необходимо импортировать Router и ActivatedRoute и ввести в конструктор:

constructor(private router: Router,
            private route: ActivatedRoute){}
person Muirik    schedule 02.10.2017