Как заставить игнорировать переход по тому же роуту, при наличии query параметров в angular?

В Angular есть несколько способов заставить приложение игнорировать переход по тому же роуту при наличии query параметров. Рассмотрим два наиболее распространенных подхода.

Использование Guard

Angular предоставляет механизмы Guard для выполнения различных действий при переходе между роутами. В нашем случае мы можем использовать CanActivate Guard для проверки наличия query параметров и решения, должно ли приложение игнорировать переход.

Создайте новый файл query-param.guard.ts и добавьте следующий код:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class QueryParamGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const queryParams = route.queryParams;
    if (Object.keys(queryParams).length > 0) {
      this.router.navigate(['/']);
      return false; // игнорировать переход
    }
    return true; // разрешить переход
  }
}

Затем добавьте этот Guard в маршруты, которые вы хотите заставить игнорировать переход:

import { QueryParamGuard } from './query-param.guard';

const routes: Routes = [
  {
    path: 'example',
    component: ExampleComponent,
    canActivate: [QueryParamGuard]
  },
  // ...
];

Использование query параметров вручную

Если вам необходимо более тонкое управление над обработкой query параметров, вы можете использовать их вручную внутри компонента.

В файле компонента example.component.ts добавьте следующий код:

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    this.activatedRoute.queryParams.subscribe(params => {
      if (Object.keys(params).length > 0) {
        this.router.navigate(['/']);
      } else {
        // обработка роута с пустыми query параметрами
      }
    });
  }
}

В обоих случаях при наличии query параметров приложение будет игнорировать переход по тому же роуту и перенаправлять пользователя на указанный путь, в данном случае /.