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

@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();
   }
 }
}

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

Создайте функцию в контроллере, которая перенаправляет на ожидаемый маршрут, например

redirectTo(uri:string){
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate([uri]));
}

затем используйте это так

this.redirectTo('//place your uri here');

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

РЕДАКТИРОВАТЬ

Для более новых версий Angular (5.1+) используйте ответ, предложенный @Simon McClive

Старый ответ

Я нашел этот обходной путь для запроса функции 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';

Немного сложнее: используйте тот же путь с некоторыми фиктивными параметрами. Например-

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

Я использую этот для проекта Angular 9:

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

PS: Проверено и работает также на "Angular 7, 8"

Угловой 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) {

}

Это то, что я сделал с Angular 9 . Я не уверен, что это работает в старых версиях.

Вам нужно будет позвонить, когда вам нужно перезагрузить.

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

Маршрутизатор forRoot должен иметь значение SameUrlNavigation для перезагрузки

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

И каждый ваш маршрут должен иметь runGuardsAndResolvers, установленный на «всегда»

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

Для меня работает hardcoding с

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

Насколько я знаю, это не может быть сделано с маршрутизатором в Angular 2. Но вы могли бы просто сделать:

window.location.href = window.location.href

Чтобы перезагрузить вид.

Нашли быстрое и прямолинейное решение, не требующее возиться с внутренней работой углов:

В основном: просто создайте альтернативный маршрут с тем же модулем назначения и просто переключайтесь между ними:

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>

Надеюсь, поможет :)

Немного хардкор но

this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {

    this.router.onSameUrlNavigation = 'ignore';

});

В моем случае:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

работать правильно

реализовать 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})

Существуют разные подходы для обновления текущего маршрута.

Измените поведение маршрутизатора (начиная с версии Angular 5.1). Установите для маршрутизаторов onSameUrlNavigation значение reload. Это будет генерировать события маршрутизатора на той же URL-навигации.

• Затем вы можете обработать их, подписавшись на маршрут
• Вы можете использовать его с комбинацией runGuardsAndResolvers для повторного запуска распознавателей

Оставьте роутер нетронутым

• Передайте обновление queryParam с текущей меткой времени в URL и подпишитесь на queryParams в перенаправленном компоненте.
• Используйте событие активации маршрутизатора-розетки, чтобы получить перенаправленный компонент.

Я написал более подробное объяснение под адресу https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e.

Надеюсь это поможет.

Предположим, что маршрут компонента, который вы хотите обновить, является 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+; чек

• здесь https://github.com/angular/angular/issues/13831 &&

• и здесь https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Но это работает для всего маршрута (включая все дочерние маршруты)

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

В точке навигации (класс)

   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 все еще не предлагает хорошего решения для этого. Я поднял вопрос 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));
  }
}

Импорт Routerи ActivatedRouteиз@angular/router

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

Введите Routerи ActivatedRoute(в случае, если вам нужно что-нибудь из URL)

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

Получить любой параметр при необходимости из URL.

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

Используя трюк, перейдя к фиктивному или основному URL, а затем к фактическому URL обновит компонент.

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

В твоем случае

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

Если вы используете фиктивный маршрут, вы увидите мигание заголовка «Не найдено», если вы внедрили не найденный URL, если он не совпадает ни с одним URL.

подписаться на изменения параметров маршрута

    // 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;
             }
          })
      }

Вам следует использовать свойство onSameUrlNavigation в RouterModule, а затем подписаться на события Route https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Решает, когда маршрут должен быть сохранен, возвращает false

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
};

и установите значение роутера в значение false, которое показывает, что этот маршрут никогда не маршрутизировался

this.mySubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.router.navigated = false;
    }
});

Я пробовал несколько исправлений, и ни одно из них не работает. Моя версия проста: добавить новый неиспользуемый параметр в параметры запроса

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

window.location.replace

// используем backtick для включения маршрута

window.location.replace ( departments/${this.id}/employees)