Как перезагрузить текущий маршрут в Angular с помощью Router

Проблема и её причина

Вы столкнулись с типичным поведением Angular Router: он не выполняет повторную навигацию, если новый маршрут идентичен текущему. Это сделано для оптимизации производительности — зачем пересоздавать компонент, если ничего не изменилось? Однако в вашем случае нужно именно пересоздать компонент, чтобы он заново выполнил инициализацию (например, подписался на данные).

Решение №1: Использование onSameUrlNavigation (рекомендуется)

Angular Router предоставляет опцию onSameUrlNavigation, которая позволяет контролировать поведение при навигации на тот же URL. Её нужно настроить один раз в корневом модуле или в конфигурации роутера.

Шаг 1: В файле app-routing.module.ts добавьте опцию onSameUrlNavigation: 'reload':

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'my-page', component: MyPageComponent },
  // ... другие маршруты
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    onSameUrlNavigation: 'reload' // Включаем перезагрузку при том же URL
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Шаг 2: Теперь в вашем компоненте можно вызывать навигацию, и Angular будет пересоздавать компонент. Но есть нюанс: просто this.router.navigate([this.router.url]) всё равно может не сработать, потому что роутер видит, что URL не изменился в рамках текущей навигации. Нужно добавить небольшой трюк — использовать метод navigateByUrl с флагом skipLocationChange: true или изменить URL на время.

Решение №2: Использование navigateByUrl с принудительным пересозданием

В вашем компоненте добавьте следующий метод:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-page',
  template: `
    <button (click)="reload()">Обновить страницу</button>
    <div *ngIf="data">{{ data }}</div>
  `
})
export class MyPageComponent {
  data: string;

  constructor(private router: Router) {
    this.loadData();
  }

  private loadData() {
    // Загрузка данных с сервера
    this.data = 'Данные загружены: ' + new Date().toLocaleTimeString();
  }

  reload() {
    // Получаем текущий URL
    const currentUrl = this.router.url;
    
    // Переходим на корень, а потом обратно на текущий URL
    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => {
      this.router.navigateByUrl(currentUrl);
    });
  }
}

Этот подход работает так: сначала мы переходим на корневой маршрут (/), но не меняем URL в адресной строке (флаг skipLocationChange), а затем сразу возвращаемся на исходный URL. Angular видит, что маршрут изменился, и пересоздаёт компонент.

Решение №3: Использование сервиса с EventEmitter (для сложных сценариев)

Если вам нужно просто обновить данные, а не пересоздавать весь компонент, можно использовать сервис:

// data.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DataService {
  private refreshSubject = new Subject<void>();
  refresh$ = this.refreshSubject.asObservable();

  triggerRefresh() {
    this.refreshSubject.next();
  }
}

// my-page.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from './data.service';

@Component({
  selector: 'app-my-page',
  template: `
    <button (click)="reload()">Обновить данные</button>
    <div>{{ data }}</div>
  `
})
export class MyPageComponent implements OnInit, OnDestroy {
  data: string;
  private subscription: Subscription;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.loadData();
    this.subscription = this.dataService.refresh$.subscribe(() => {
      this.loadData();
    });
  }

  ngOnDestroy() {
    this.subscription?.unsubscribe();
  }

  private loadData() {
    this.data = 'Данные обновлены: ' + new Date().toLocaleTimeString();
  }

  reload() {
    this.dataService.triggerRefresh();
  }
}

Сравнение подходов

• Решение №1 (onSameUrlNavigation + navigateByUrl): Подходит, если нужно полностью пересоздать компонент (выполнить ngOnInit, ngOnDestroy). Требует настройки в модуле.
• Решение №2 (сервис с EventEmitter): Лучше, если нужно только обновить данные без пересоздания компонента. Эффективнее, так как не уничтожает и не создаёт компонент заново.
• Решение №3 (location.reload): Используйте только как крайнюю меру, если не важно состояние приложения.

В вашем случае, если вы просто хотите обновить данные после сохранения, рекомендую использовать сервис с EventEmitter — это чище и быстрее. Если же вам нужно сбросить всё состояние компонента (например, сбросить формы), используйте комбинацию onSameUrlNavigation и navigateByUrl.

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

@Component({
  selector: 'app-my-page',
  template: `
    <button (click)="reload()">Обновить</button>
    <div>{{ data }}</div>
  `
})
export class MyPageComponent {
  data: string;

  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {
    this.loadData();
  }

  private loadData() {
    this.data = 'Данные: ' + Math.random();
  }

  reload() {
    // Добавляем случайный query-параметр для принудительной перезагрузки
    this.router.navigate([], {
      relativeTo: this.route,
      queryParams: { refresh: Date.now() },
      queryParamsHandling: 'merge' // сохраняем существующие параметры
    }).then(() => {
      this.loadData(); // вызываем обновление данных
    });
  }
}