Я використовую кутовий 2 із стратегією хешлокації.

Компонент завантажується цим маршрутом:

"departments/:id/employees"

Поки добре.

Після успішного пакетного збереження декількох відредагованих рядків таблиці я хочу перезавантажити поточний URL маршруту через:

this.router.navigate([`departments/${this.id}/employees`]);

Але нічого не відбувається, чому?

Якщо ваш navigate () не змінює URL-адресу, яка вже була показана в адресному рядку вашого браузера, маршрутизатор не має нічого спільного. Оновити дані не в роботі роутера. Якщо ви хочете оновити дані, створіть службу, введену в компонент, і виберіть функцію завантаження служби. Якщо будуть отримані нові дані, оновлення представлення даних буде оновлено через прив’язки.

Тепер це можна зробити в Angular 5.1, використовуючи onSameUrlNavigationвластивість конфігуратора маршрутизатора.

Я додав блог, де пояснюється, як тут, але суть його полягає в наступному

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');

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

EDIT

Для новіших версій 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: Тестується і працює також на "Кутовий 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) {

}

Це те, що я зробив з кутовим 9 . Я не впевнений, чи працює це у старих версіях.

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

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

Маршрутизатору для Rooot потрібно встановити програму SameUrlNavigation для "перезавантаження"

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

І кожен ваш маршрут повинен мати runGuardsAndResolvers, встановлений на "завжди"

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

Для мене працює жорстке кодування з

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

Наскільки я знаю, цього не можна зробити з маршрутизатором у куті 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})

Існують різні підходи до оновлення поточного маршруту

Зміна поведінки маршрутизатора (з кутового 5.1) Встановіть маршрутизатори наSameUrlNavigation на «перезавантажити». Це передаватиме події маршрутизатора на одній навігації 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/isissue/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/isissue/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'];
    });

Якщо ви змінюєте маршрут через посилання маршрутизатора, виконайте це:

  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, а потім підписатися на події маршруту https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Вирішує, коли слід зберігати маршрут, повернути помилково

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)