Я использую angular 2 с стратегией hashlocation.
Компонент загружается с помощью этого маршрута:
"departments/:id/employees"
До сих пор хорошо.
После того, как я успешно выполнил пакетное сохранение нескольких отредактированных строк таблицы, я хочу перезагрузить текущий URL маршрута с помощью:
this.router.navigate([`departments/${this.id}/employees`]);
Но ничего не происходит, почему?
Если ваш навигатор() не изменяет URL-адрес, который уже указан в адресной строке вашего браузера, маршрутизатору нечего делать. Это не задача маршрутизатора для обновления данных. Если вы хотите обновить данные, создайте службу, введенную в компонент, и вызовите функцию загрузки в службе. Если новые данные будут восстановлены, он обновит представление через привязки.
Теперь это можно сделать в Angular 5.1 с onSameUrlNavigation свойства onSameUrlNavigation конфигурации Router.
Я добавил блог, объясняющий, как здесь, но суть в следующем
В конфигурации вашего маршрутизатора включите параметр onSameUrlNavigation, установив для него значение 'reload'. Это заставляет маршрутизатор запускать цикл событий, когда вы пытаетесь перейти к уже активному маршруту.
@ngModule({
imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
exports: [RouterModule],
})
В ваших определениях маршрута установите для runGuardsAndResolvers значение always. Это скажет маршрутизатору всегда запускать циклы защиты и распознавания, вызывая связанные события.
export const routes: Routes = [
{
path: 'invites',
component: InviteComponent,
children: [
{
path: '',
loadChildren: './pages/invites/invites.module#InvitesModule',
},
],
canActivate: [AuthenticationGuard],
runGuardsAndResolvers: 'always',
}
]
Наконец, в каждом компоненте, который вы хотите включить перезагрузку, вам нужно обрабатывать события. Это может быть сделано путем импорта маршрутизатора, привязки к событиям и вызова метода инициализации, который сбрасывает состояние вашего компонента и, при необходимости, повторно выбирает данные.
export class InviteComponent implements OnInit, OnDestroy {
navigationSubscription;
constructor(
// … your declarations here
private router: Router,
) {
// subscribe to the router events. Store the subscription so we can
// unsubscribe later.
this.navigationSubscription = this.router.events.subscribe((e: any) => {
// If it is a NavigationEnd event re-initalise the component
if (e instanceof NavigationEnd) {
this.initialiseInvites();
}
});
}
initialiseInvites() {
// Set default values and re-fetch any data you need.
}
ngOnDestroy() {
if (this.navigationSubscription) {
this.navigationSubscription.unsubscribe();
}
}
}
После выполнения всех этих шагов у вас должна быть включена перезагрузка маршрута.
Я нашел это обходное решение для запроса функции GitHub для Angular:
this._router.routeReuseStrategy.shouldReuseRoute = function(){
return false;
};
this._router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
this._router.navigated = false;
window.scrollTo(0, 0);
}
});
Я попытался добавить это к моей функции app.component.ts ngOnInit, и это сработало. Все дальнейшие клики по одной и той же ссылке теперь перезагружают component и данные.
Ссылка на оригинальный запрос функции GitHub
Кредит переходит на mihaicux2 на GitHub.
Я тестировал это на версии 4.0.0-rc.3 с import { Router, NavigationEnd } from '@angular/router';
Создайте функцию в контроллере, которая перенаправляет на ожидаемый маршрут, например
redirectTo(uri:string){
this.router.navigateByUrl('/DummyComponent', {skipLocationChange: true}).then(()=>
this.router.navigate([uri]));}
затем используйте это так
this.redirectTo('//place your uri here');
эта функция будет перенаправлять на фиктивный маршрут и быстро возвращаться к маршруту назначения, даже если пользователь этого не осознает.
Немного сложно: используйте тот же путь с некоторыми фиктивными параметрами. Например -
refresh(){
this.router.navigate(["/same/route/path?refresh=1"]);
}
Angular 2-4 перезагрузка маршрута маршрута
Для меня использование этого метода внутри корневого компонента (компонента, присутствующего на любом маршруте) работает:
onRefresh() {
this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};
let currentUrl = this.router.url + '?';
this.router.navigateByUrl(currentUrl)
.then(() => {
this.router.navigated = false;
this.router.navigate([this.router.url]);
});
}
Это работает для меня как шарм
this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([<route>]));
На странице смены параметров перезагрузка не произойдет. Это действительно хорошая особенность. Нет необходимости перезагружать страницу, но мы должны изменить значение компонента. Метод paramChange вызовет изменение URL. Таким образом, мы можем обновить данные компонента
/product/: id / details
import { ActivatedRoute, Params, Router } from ‘@angular/router;
export class ProductDetailsComponent implements OnInit {
constructor(private route: ActivatedRoute, private router: Router) {
this.route.params.subscribe(params => {
this.paramsChange(params.id);
});
}
// Call this method on page change
ngOnInit() {
}
// Call this method on change of the param
paramsChange(id) {
}
Нашли быстрое и прямолинейное решение, не требующее возиться с внутренней работой углов:
В основном: просто создайте альтернативный маршрут с тем же модулем назначения и просто переключайтесь между ними:
const routes: Routes = [
{
path: 'gesuch',
loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
},
{
path: 'gesuch-neu',
loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
}
];
А вот переключаемое меню:
<ul class="navigation">
<li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
<li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>
Надеюсь, поможет :)
В моем случае:
const navigationExtras: NavigationExtras = {
queryParams: { 'param': val }
};
this.router.navigate([], navigationExtras);
работает правильно
Для меня работает hardcoding с
this.router.routeReuseStrategy.shouldReuseRoute = function() {
return false;
// or
return true;
};
реализовать OnInit и вызвать ngOnInit() в методе для route.navigate()
Смотрите пример:
export class Component implements OnInit {
constructor() { }
refresh() {
this.router.navigate(['same-route-here']);
this.ngOnInit(); }
ngOnInit () {
}
Решил похожий сценарий, используя фиктивный компонент и маршрут для reload, которая фактически выполняет redirect. Это определенно не охватывает все пользовательские сценарии, но просто работает для моего сценария.
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';
@Component({
selector: 'reload',
template: '
<h1>Reloading...</h1>
',
})
export class ReloadComponent implements OnInit{
constructor(private router: Router, private route: ActivatedRoute) {
}
ngOnInit() {
const url = this.route.snapshot.pathFromRoot.pop().url.map(u => u.path).join('/');
this.router.navigateByUrl(url);
}
}
Маршрутизация связана с перехватом всех URL-адресов с использованием подстановочного знака:
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { ReloadComponent } from './views/reload/reload.component';
@NgModule({
declarations: [
LoginViewComponent, HomeViewComponent, ReloadComponent
],
imports: [
RouterModule.forRoot([
{ path: 'login', component: LoginViewComponent },
{ path: 'home', component: HomeViewComponent },
{
path: 'reload',
children: [{
path: '**',
component: ReloadComponent
}]
},
{ path: '**', redirectTo: 'login'}
])
],
exports: [
RouterModule,
],
providers: [],
})
export class AppRoutingModule {}
Чтобы использовать это, нам просто нужно добавить перезагрузку в URL, куда мы хотим перейти:
this.router.navigateByUrl('reload/some/route/again/fresh', {skipLocationChange: true})
Немного хардкор но
this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {
this.router.onSameUrlNavigation = 'ignore';
});
Существуют разные подходы для обновления текущего маршрута.
Измените поведение маршрутизатора (начиная с Angular 5.1). Установите для маршрутизаторов onSameUrlNavigation значение reload. Это будет отправлять события маршрутизатора на тот же URL-адрес.
Оставьте роутер нетронутым
Я написал более подробное объяснение по адресу https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e.
Надеюсь это поможет.
Насколько я знаю, это не может быть сделано с маршрутизатором в Angular 2. Но вы могли бы просто сделать:
window.location.href = window.location.href
Чтобы перезагрузить вид.
Предположим, что компонентный маршрут, который вы хотите обновить, это view, затем используйте это:
this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
return false;
}
return (future.routeConfig === curr.routeConfig);
};
Вы можете добавить debugger внутри метода, чтобы знать, какой будет точный маршрут после перехода к "departments/:id/employees".
Решение состоит в том, чтобы передать фиктивный параметр (то есть время в секундах), таким образом, ссылка всегда перезагружается:
this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])
Я использую setTimeout и navigationByUrl чтобы решить эту проблему... И он работает нормально для меня.
Он перенаправляется на другой URL и вместо этого снова появляется в текущем URL...
setTimeout(() => {
this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
this.router.navigate([route]));
}, 500)
Я считаю, что это было решено (изначально) в Angular 6+; проверять
Но это работает для всего маршрута (включая все дочерние маршруты)
Если вы хотите настроить таргетинг на один компонент, вот как: используйте изменяемый параметр запроса, чтобы вы могли перемещаться столько раз, сколько захотите.
В точке навигации (класс)
this.router.navigate(['/route'], {
queryParams: { 'refresh': Date.now() }
});
В компоненте, который вы хотите "обновить/перезагрузить"
// . . . Component Class Body
$_route$: Subscription;
constructor (private _route: ActivatedRoute) {}
ngOnInit() {
this.$_route$ = this._route.queryParams.subscribe(params => {
if (params['refresh']) {
// Do Something
// Could be calling this.ngOnInit() PS: I Strongly advise against this
}
});
}
ngOnDestroy() {
// Always unsubscribe to prevent memory leak and unexpected behavior
this.$_route$.unsubscribe();
}
// . . . End of Component Class Body
Я использую этот для проекта Angular 7:
reloadCurrentRoute() {
let currentUrl = this.router.url;
this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
this.router.navigate([currentUrl]);
});
}
подписаться на изменения параметров маршрута
// parent param listener ie: "/:id"
this.route.params.subscribe(params => {
// do something on parent param change
let parent_id = params['id']; // set slug
});
// child param listener ie: "/:id/:id"
this.route.firstChild.params.subscribe(params => {
// do something on child param change
let child_id = params['id'];
});
Если вы меняете маршрут через Router Link, выполните следующие действия:
constructor(public routerNavigate: Router){
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.router.events.subscribe((evt) => {
if (evt instanceof NavigationEnd) {
this.router.navigated = false;
}
})
}
Очень обидно, что Angular все еще не предлагает хорошего решения для этого. Я поднял вопрос о github здесь: https://github.com/angular/angular/issues/31843
А пока это мой обходной путь. Он основан на некоторых других решениях, предложенных выше, но я думаю, что он немного более надежен. Он включает обертывание службы маршрутизатора в "ReloadRouter", который заботится о функциональности перезагрузки, а также добавляет RELOAD_PLACEHOLDER в конфигурацию основного маршрутизатора. Это используется для временной навигации и позволяет избежать запуска любых других маршрутов (или охранников).
Примечание: Используйте ReloadRouter только в тех случаях, когда вам нужна функция перезагрузки. В противном случае используйте обычный Router.
import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class ReloadRouter {
constructor(public readonly router: Router) {
router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
}
public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
return this.router
.navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
.then(() => this.router.navigate(commands, extras));
}
}
Вы должны использовать свойство onSameUrlNavigation в RouterModule, а затем подписаться на события Route.https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e
По тому же маршруту перезагрузите Angular 6
Этот код ниже будет работать:
logoFn(url: any) {
this.router.routeReuseStrategy.shouldReuseRoute = function () {
return false;
};
this.router.navigate(['']); or
this.router.navigate([url]);
}
Это сработало для меня:
let url = `departments/${this.id}/employees`;
this.router.navigated = false;
this.router.navigateByUrl(url);
перезагрузить текущий маршрут в Angular 2 очень полезная ссылка, чтобы перезагрузить текущий маршрут в Angualr 2 или 4
в этом определить две техники, чтобы сделать это
для более подробной информации смотрите ссылку выше
Попробуй это
window.open('панель инструментов', '_self');
его старый метод, но работает на всех угловых версиях, где он перенаправляет на маршрут и обновляет страницу.