Заменить реальное значение из api для параметра в URL при изменении вручную пользователем в адресной строке с помощью Angular 6

Question

Допустим, у меня есть URL,

http://localhost:4200/param1/param2/product

Здесь param1, param2 - реальные значения параметров из api. Если пользователь изменяет значение параметра в адресной строке вручную и перезагружает страницу. Значение параметра должно быть заменено реальными значениями (param1, param2) из ​​API. Пожалуйста, предложите мне способ достичь этого.

Answer 1

Вы можете использовать CanActivate охранник маршрута. В защитном действии вы проверите результат API и можете при необходимости перенаправить.

Вот простой код для проверки параметра, который пользователь ввел в URL. Грубо говоря, вы можете проверить этот параметр, вызвав ваш API.

canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
  const idParam: number = +next.paramMap.get('id');
  if (idParam === 3) {
    this.router.navigateByUrl('/hello/1');
    return false;
  } else {
    return true;
  }
}

Вот демо Stackblitz , чтобы показать вам идею (обратите внимание на URL).