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

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

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

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

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


angular query-parameters routing
person Gesh    schedule 09.12.2018    source источник
comment
Это параметр маршрутизации. angular.io/guide/router#route-parameters   -  person sancelot    schedule 16.12.2018
comment
почему бы вам не сохранить это состояние в localStorage?   -  person Touqeer Shafi    schedule 18.12.2018

Ответы (4)


arrow_upward
3
arrow_downward

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

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

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'])
        }
      );
  }
person ForestG    schedule 17.12.2018

arrow_upward
1
arrow_downward

Думаю, я немного опоздал на награду, но вот реализация. В вашем 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 вы можете проверить, присутствует ли указанный параметр запроса.

person Black Mamba    schedule 19.12.2018
comment
если я вернусь на предыдущую страницу, условие вернет истину, и мы будем перенаправлены на ту же страницу, пожалуйста, предоставьте это решение также - person Saransh Dhyani; 15.02.2021

arrow_upward
0
arrow_downward

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

Или при использовании роутера:

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

person Rubin bhandari    schedule 19.12.2018

arrow_upward
0
arrow_downward

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

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

введите здесь описание изображения

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

person abarrenechea    schedule 19.12.2018