Угловой 5 глобальный параметр запроса

Question

Я хотел бы добавить глобальный параметр запроса для каждого пути приложения (что-то вроде / my / path? Config = foo).Я не хочу использовать параметр perserve query params, поскольку он сохраняет все параметры запроса, и я хочу сохранить только этот конкретный.

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

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

Поэтому я хотел бы автоматически прикрепить параметр запроса «config» к каждому URL-адресу приложения, как только пользователь выберет параметр конфигурации.

Answer 1

Я думаю, что немного опоздал на награду, но здесь реализация.В вашем app.component.ts

import { Router, NavigationEnd } from '@angular/router';

  constructor(private route: Router) {
    let flag = 0;
    this.route.events.subscribe((event) => {
      if(event instanceof NavigationEnd) {
        console.log(event);

        if(event.url.indexOf('?') === -1)  {
          this.route.navigate([event.url], { queryParams: { config: 'popular' } });
        }   
      }      
    })
  }
}

здесь демонстрация stackblitz: https://stackblitz.com/edit/angular-router-basic-example-t5w3gz

Мы можем изменить при необходимости работу в соответствии с активированным маршрутом. Поэтому вместо простого indexOf вы можетеможно проверить наличие указанного параметра запроса.

Answer 2

Вы можете добавить дополнительный параметр, когда пользователь выбирает или устанавливает конфигурацию, используя функцию навигации в классе Router.Переход к тому же маршруту не воссоздает компонент и не запускает ngOnInit.Добавление дополнительных параметров не требует определения новых маршрутов в вашем приложении, и это будет выглядеть следующим образом: localhost: 3000 / heroes; config = foo

Большинство разработчиков (включая меня) ожидали, что переход на тот же маршрутиспользование разных параметров должно воссоздать компонент, но это не стандартное поведение .Вы можете взглянуть на этот вопрос, чтобы узнать больше об этом: Router Navigate не вызывает ngOnInit, когда та же страница , или посетите документацию Angular для маршрутизации: https://angular.io/api/router/RouterModule

Чтобы прочитать параметр из URL-адреса, если пользователь перезагрузит страницу, или скопировать, вставьте URL-адрес, который можно подписать для параметров AcivatedRoute, и прочитайте параметр.

Answer 3

В настоящее время нет возможности установить его глобально.Использование queryParamsHandling представляется единственным вариантом:

Или при использовании router:

router.navigate ('/ login', {queryParamsHandling: "preserve"}) Другой возможный вариант для queryParamsHandling - этослияния.

Answer 4

Я предлагаю переопределить вашу стратегию маршрутизации и иметь одинаковый параметр маршрутизации для каждого Компонента, для которого вы хотите использовать конфигурацию.

Определите вашу маршрутизацию так, чтобы она имела специальный параметр:

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'example-path,
    canActivate: [AuthGuard],
    children: [
      {
        path: ':example-parameter-path',
        canActivate: [AuthGuard],
        children: [
          {
            path: ':configuration',
            component: YourComponent
          },
      {
        path: '',
        component: YourComponent,
        pathMatch: 'full'
      },
    ]
  },
...
];

Затем в компонентах, к которым вы хотите получить доступ к этой конфигурации, вы можете получить ее из Активированного маршрута:

 private subscribeToUrlChange() {
    this.activatedRoute
      .params
      .subscribe(
        params => {
          console.log([params['configuration'])
        }
      );
  }