При создании одностраничных приложений URL часто меняется без перезагрузки страницы.

Это может приводить к проблемам при попытке доступа к параметрам запроса из URL. Функция QueryParamsHandling в Angular позволяет решить эту проблему. QueryParamsHandling — это стратегия маршрутизации, позволяющая разработчикам управлять способом обработки параметров запроса при изменении URL.

По умолчанию при изменении URL Angular сбрасывает параметры запроса. Однако благодаря QueryParamsHandling разработчики могут сохранять или объединять параметры запросов при изменении URL.

Существует множество преимуществ использования QueryParamsHandling в Angular-приложениях.

Во-первых, эта функция позволяет разработчикам иметь больший контроль над поведением приложения.

Во-вторых, она упрощает отладку и тестирование приложений, поскольку параметры запросов всегда будут согласованными.

В этой статье я вкратце познакомлю вас с QueryParamsHandling и его типом в Angular.

▍ План изучения

• Что такое QueryParamsHandling?
• Типы или значения QueryParamsHandling
• Пример работы QueryParamsHandling по умолчанию
• Пример объединения параметров QueryParamsHandling
• Пример сохранения параметров QueryParamsHandling
• Подведение итогов

Что такое QueryParamsHandling?

QueryParamsHandling — это встроенная функция маршрутизации Angular, позволяющая разработчикам выбирать, как должны обрабатываться параметры запросов при создании или сопоставлении маршрутов.

Она может быть полезна для таких вещей, как создание ссылок, сохраняющих состояние формы, или для отслеживания истории пагинации.

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

Однако иногда нам нужна возможность указать, должен ли параметр запроса быть опциональным или обязательным. Именно в этом нам поможет опция QueryParamsHandling.

Типы или значения QueryParamsHandling

Можно использовать три значения QueryParamsHandling:

• Merge (слияние): это опция по умолчанию, она просто объединяет новые параметры запросов с существующими параметрами запросов, которые уже есть в URL.
• Preserve (сохранение): эта опция сохраняет все параметры запросов, находящиеся в URL, и не добавляет новых.
• Replace (замена): эта опция заменяет все имеющиеся параметры добавляемыми новыми.

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

Однако разработчики могут выбрать опцию QueryParamsHandling «preserve», это сохранит все параметры запросов из текущего URL при создании или сопоставлении маршрутов.

Кроме того, разработчики могут выбрать в QueryParamsHandling опцию «empty», что будет удалять все параметры запросов из URL при создании или сопоставлении запросов.

QueryParamsHandling по умолчанию

В Angular есть встроенный способ обработки параметров запросов в приложениях. По умолчанию при использовании маршрутизатора для перехода на новую страницу все параметры запросов сохраняются.

Часто нам требуется именно такое поведение, так как оно позволяет нам сохранять состояние между перезагрузками страниц и переходами.

Однако иногда нам может потребоваться игнорирование или сброс параметров запросов при навигации.

Пример работы QueryParamsHandling по умолчанию:

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <h1>Default component</h1>

    <button k1:="" queryparams="" routerlink="/a/123" v1="">
      go to a/123
    </button>
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `
  ]
})
export class DefaultComponent {}

Пример можно посмотреть на stackblitz.

Слияние при помощи QueryParamsHandling

Merge в QueryParamsHandling — это новая возможность Angular, позволяющая лучше управлять параметрами запросов при маршрутизации. Эту функцию можно использовать для упрощения работы с параметрами запросов в вашем приложении.

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

Пример слияния QueryParamsHandling:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'a',
  template: `
    >router-outlet<>/router-outlet<
    >button k2:="" queryparams="" queryparamshandling="merge" routerlink="b" v2=""<
      Go to b with queryParamsHandling='merge'
    >/button<
    >br /<
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class AComponent {
  @Input() name: string;

  constructor() {
    console.warn('[AComponent] initialised');
  }
}

Пример можно посмотреть на stackblitz.

Сохранение параметров при помощи QueryParamsHandling

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

Это можно сделать при помощи опции QueryParamsHandling в конфигурации маршрутизатора.

QueryParamsHandling Preserve полезна для таких вещей, как пагинация, когда вам нужно сохранять номер текущей страницы при навигации. Также эта опция полезна для сохранения введённых в формы значений при перемещении между компонентами.

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

Второй заключается в том, что опция может усложнить тестирование и отладку приложения. В целом, её лучше использовать умеренно и только в случае абсолютной необходимости.

Пример сохранения при помощи QueryParamsHandling:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'a',
  template: `
    <router-outlet></router-outlet>

    <button [queryParams]="{ k2: 'v2' }" routerLink="b">
      go to b with queryParamsHandling='preserve'
    </button>
    <br />
  `,
  styles: [
    `
      h1 {
        font-family: Lato;
      }
    `,
  ],
})
export class AComponent {
  @Input() name: string;

  constructor() {
   
  }
}

Пример можно посмотреть на stackblitz.

Подведём итог

QueryParamsHandling — это отличный способ управления параметрами в URL при помощи Angular. С помощью этого способа можно легко добавлять, удалять и изменять параметры в URL.

Он упрощает отслеживание параметров и помогает поддерживать их актуальность.

У использования queryParamsHandling в Angular есть множество преимуществ. Эта функция помогает более эффективно управлять параметрами URL, а также способна повысить читаемость кода.

Кроме того, queryParamsHandling может помочь избежать потенциальных ошибок в коде.

Telegram-канал с полезностями и уютный чат