Блог

Главная - Вопросы по программированию - Как повторно использовать маршрут при изменении параметров запроса, но не при изменении параметров пути в Angular?

Как повторно использовать маршрут при изменении параметров запроса, но не при изменении параметров пути в Angular?

#javascript #angular #angular-router

Вопрос:

Допустим, у меня есть 2 маршрута '/users' и /users/:id . Первый рендерит UserListComponent , а второй UserViewComponent .

Я хочу повторно отобразить компонент при переходе от /users/1 к /users/2 . И, конечно, если я перейду от /users туда /users/1 и наоборот.

Но я НЕ хочу перерисовывать компонент, если я перейду от /users/1?tab=contacts к /users/1?tab=accounts .

Есть ли способ настроить маршрутизатор таким образом для всего приложения?

—

Обновить:

Я импортирую RouterModule в AppRoutingModule следующим образом:

RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })

Я использую Angular 12

Комментарии:

1. какова конфигурация вашего модуля маршрутизатора? onSameUrlNavigation настроено на reload ?

2. relativeLinkResolution имеет значение «наследие». Никакая другая конфигурация не передается в RouterModule.forRoot

3. как вы назначаете свои маршруты ? причина, по которой изменение параметров запроса уже не приведет к повторной отправке компонента.

4. Да, изменение параметров запроса не вызывает повторной отправки, как и изменение параметров пути — это та часть, которая не соответствует моим потребностям.

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

Ответ №1:

Поведение углового маршрутизатора по умолчанию заключается в сохранении текущего компонента, когда URL-адрес соответствует текущему маршруту.

Это поведение можно изменить с помощью onSameUrlNavigation опции:

Определите, что должен делать маршрутизатор, если он получит запрос на навигацию по текущему URL-адресу. Значение по умолчанию равно ignore , что приводит к тому, что маршрутизатор игнорирует навигацию. Это может отключить такие функции, как кнопка «обновить». Используйте этот параметр для настройки поведения при переходе по текущему URL-адресу. Значение по умолчанию — «игнорировать».

К сожалению, этот параметр недостаточно детализирован, чтобы разрешить reload параметры пути и ignore параметры запроса.

Таким образом, вы должны подписаться как на параметры запроса, так и на изменения параметров пути с помощью чего-то вроде этого:

 constructor(route: ActivatedRoute) { }

ngOnInit() {
  this.renderLogic();
  this.route.params.subscribe(() => this.renderLogic());
  this.route.queryParams.subscribe(() => this.renderLogic());
}

renderLogic() {
  // ...
}

Ответ №2:

Насколько я знаю, @Guerric P прав, вы не можете полностью перерисовывать компонент выборочно, как это, по крайней мере, без каких-либо хитростей, таких как подписка на каждое событие, а затем, возможно, блокировка его для одного сценария, а не для другого. Не стесняйтесь попробовать что-то подобное, но ниже приведена альтернатива, если вы используете распознаватели для получения своих данных.

Что вы можете сделать, так это использовать runGuardsAndResolvers в конфигурации вашего маршрута следующим образом:

 const routes = [{
  path: 'team/:id',
  component: Team,
  children: [{
    path: 'user/:name',
    component: User
  }],
  runGuardsAndResolvers: 'pathParamsChange',
  resolvers: {...},
  canActivate: [...]
}]

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

Метки: ,