Как установить ограничения в маршрутизации Angular 8 с параметрами

Question

Я устанавливаю маршруты с параметрами в моем веб-приложении с Angular. Как я могу установить ограничения для этих параметров?

Это путь в моем app-routing.module.ts:

{path: 'post/:id', component: PostComponent, resolve: {resolver: Resolver}},

Пользователь может изменить URL в своем браузере иустановить любой идентификатор, который он хотел бы.

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

Answer 1

Способ ограничения навигации - использование угловых гвардейцев. Я бы посоветовал вам начать с CanActivate guard

{
  path: 'post/:id',
  component: PostComponent,
  resolve: {resolver: Resolver}},
  canActivate: [CanActivateId]
}

и Guard можно использовать (для начинающих просто идентификаторыкоторые меньше 10 в качестве примера):

@Injectable()
class CanActivateId implements CanActivate {
  constructor() {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    return route.params.id > 10;
  }
}