Я использую Angular 2 со стратегией hashlocation.
Компонент загружен этим маршрутом:
"departments/:id/employees"
Пока все хорошо.
После успешного пакетного сохранения нескольких отредактированных строк таблицы, я хочу перезагрузить текущий URL маршрута через:
this.router.navigate([`departments/${this.id}/employees`]);
Но ничего не происходит, почему?
Ответы:
Если ваш navigate () не меняет URL, который уже показан в адресной строке вашего браузера, маршрутизатор не имеет ничего общего. Обновление данных не является задачей маршрутизатора. Если вы хотите обновить данные, создайте сервис, внедренный в компонент, и вызовите функцию загрузки в сервисе. Если новые данные будут получены, он обновит представление через привязки.
источник
Теперь это можно сделать в Angular 5.1, используя
onSameUrlNavigation
свойство конфигурации Router.Я добавил блог, объясняющий, как здесь, но суть в следующем
https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
В настройках конфигурации роутера включите
onSameUrlNavigation
его'reload'
. Это заставляет маршрутизатор запускать цикл событий, когда вы пытаетесь перейти к уже активному маршруту.В ваших определениях маршрута установите
runGuardsAndResolvers
наalways
. Это скажет маршрутизатору всегда запускать циклы защиты и распознавания, вызывая связанные события.Наконец, в каждом компоненте, который вы хотите включить перезагрузку, вам нужно обрабатывать события. Это может быть сделано путем импорта маршрутизатора, привязки к событиям и вызова метода инициализации, который сбрасывает состояние вашего компонента и повторно выбирает данные, если это необходимо.
После выполнения всех этих шагов у вас должна быть включена перезагрузка маршрута.
источник
init
функции,init
?Создайте функцию в контроллере, которая перенаправляет на ожидаемый маршрут, например
затем используйте это так
эта функция будет перенаправлять на фиктивный маршрут и быстро возвращаться к маршруту назначения, даже если пользователь этого не осознает.
источник
'/'
вместо'/DummyComponent'
РЕДАКТИРОВАТЬ
Для более новых версий Angular (5.1+) используйте ответ, предложенный @Simon McClive
Старый ответ
Я нашел этот обходной путь для запроса функции GitHub для Angular:
Я попытался добавить это в мой app.component.ts
ngOnInit
функции , и это, , сработало. Все дальнейшие клики по той же ссылке теперь перезагружаютcomponent
данные и.Ссылка на оригинальный запрос GitHub
Кредит идет на mihaicux2 на GitHub.
Я проверил это на версии
4.0.0-rc.3
сimport { Router, NavigationEnd } from '@angular/router';
источник
Немного сложнее: используйте тот же путь с некоторыми фиктивными параметрами. Например-
источник
this.router.navigate(['/pocetna'], { queryParams: { 'refresh': 1 } });
иroute.queryParams.subscribe(val => myRefreshMethod())
гдеroute: ActivatedRoute
вводится в обновленном компоненте ... Надеюсь, что это помогаетЯ использую этот для проекта Angular 9:
PS: Проверено и работает также на "Angular 7, 8"
источник
Угловой 2-4 маршрут перезагрузки взломать
Для меня использование этого метода внутри корневого компонента (компонента, который присутствует на любом маршруте) работает:
источник
Это работает для меня как шарм
источник
На странице смены параметров перезагрузка не произойдет. Это действительно хорошая особенность. Нет необходимости перезагружать страницу, но мы должны изменить значение компонента. Метод paramChange вызовет изменение URL. Таким образом, мы можем обновить данные компонента
источник
Это то, что я сделал с Angular 9 . Я не уверен, что это работает в старых версиях.
Вам нужно будет позвонить, когда вам нужно перезагрузить.
Маршрутизатор forRoot должен иметь значение SameUrlNavigation для перезагрузки
И каждый ваш маршрут должен иметь runGuardsAndResolvers, установленный на «всегда»
источник
Для меня работает hardcoding с
источник
Насколько я знаю, это не может быть сделано с маршрутизатором в Angular 2. Но вы могли бы просто сделать:
Чтобы перезагрузить вид.
источник
Нашли быстрое и прямолинейное решение, не требующее возиться с внутренней работой углов:
В основном: просто создайте альтернативный маршрут с тем же модулем назначения и просто переключайтесь между ними:
А вот переключаемое меню:
Надеюсь, поможет :)
источник
Немного хардкор но
источник
В моем случае:
работать правильно
источник
реализовать OnInit и вызвать ngOnInit () в методе для route.navigate ()
Смотрите пример:
источник
Решил похожий сценарий, используя фиктивный компонент и маршрут для
reload
, который на самом деле делаетredirect
. Это определенно не охватывает все пользовательские сценарии, но просто работает для моего сценария.Маршрутизация связана с перехватом всех URL-адресов с использованием подстановочного знака:
Чтобы использовать это, нам просто нужно добавить перезагрузку в URL, куда мы хотим перейти:
источник
Существуют разные подходы для обновления текущего маршрута.
Измените поведение маршрутизатора (начиная с версии Angular 5.1). Установите для маршрутизаторов onSameUrlNavigation значение reload. Это будет генерировать события маршрутизатора на той же URL-навигации.
Оставьте роутер нетронутым
Я написал более подробное объяснение под адресу https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e.
Надеюсь это поможет.
источник
Предположим, что маршрут компонента, который вы хотите обновить, является
view
следующим:Вы можете добавить
debugger
метод внутри, чтобы знать, какой будет точный маршрут после перехода"departments/:id/employees"
.источник
Решение состоит в том, чтобы передать фиктивный параметр (то есть время в секундах), таким образом, ссылка всегда перезагружается:
источник
Я использую
setTimeout
иnavigationByUrl
для решения этой проблемы ... И это работает нормально для меня.Он перенаправляется на другой URL и вместо этого снова появляется в текущем URL ...
источник
Я считаю, что это было решено (изначально) в Angular 6+; чек
здесь https://github.com/angular/angular/issues/13831 &&
и здесь https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2
Но это работает для всего маршрута (включая все дочерние маршруты)
Если вы хотите настроить таргетинг на один компонент, вот как: используйте изменяемый параметр запроса, чтобы вы могли перемещаться столько раз, сколько захотите.
В точке навигации (класс)
В компоненте, который вы хотите «обновить / перезагрузить»
источник
Очень обидно, что Angular все еще не предлагает хорошего решения для этого. Я поднял вопрос GitHub здесь: https://github.com/angular/angular/issues/31843
А пока это мой обходной путь. Он основан на некоторых других решениях, предложенных выше, но я думаю, что он немного более надежен. Это включает в себя оборачивание службы маршрутизатора в "
ReloadRouter
", которая заботится о функциональности перезагрузки, а также добавляетRELOAD_PLACEHOLDER
конфигурацию основного маршрутизатора. Это используется для временной навигации и позволяет избежать запуска любых других маршрутов (или охранников).Примечание: используйте только
ReloadRouter
в тех случаях, когда вы хотите перезагрузить функциональность. Используйте нормальное вRouter
противном случае.источник
Импорт
Router
иActivatedRoute
из@angular/router
Введите
Router
иActivatedRoute
(в случае, если вам нужно что-нибудь из URL)Получить любой параметр при необходимости из URL.
Используя трюк, перейдя к фиктивному или основному URL, а затем к фактическому URL обновит компонент.
В твоем случае
Если вы используете фиктивный маршрут, вы увидите мигание заголовка «Не найдено», если вы внедрили не найденный URL, если он не совпадает ни с одним URL.
источник
подписаться на изменения параметров маршрута
источник
Если вы меняете маршрут через Router Link, выполните следующие действия:
источник
Вам следует использовать свойство onSameUrlNavigation в RouterModule, а затем подписаться на события Route https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e
источник
Решает, когда маршрут должен быть сохранен, возвращает false
и установите значение роутера в значение false, которое показывает, что этот маршрут никогда не маршрутизировался
источник
Я пробовал несколько исправлений, и ни одно из них не работает. Моя версия проста: добавить новый неиспользуемый параметр в параметры запроса
источник
window.location.replace
// используем backtick для включения маршрута
window.location.replace (
departments/${this.id}/employees
)источник