Подтвердить что ты не робот

Обработка 404 с помощью Angular2

Есть ли способ настроить маршрутизатор Angular2 для перенаправления на определенный маршрут, если введен неверный путь?

Например, если у меня есть три маршрута:
/Дом
/О
/404

и я ввожу/тренирует (маршрут, не присутствующий в конфигурации маршрута), я хотел бы, чтобы маршрутизатор перенаправил меня на 404.

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление для нового @ angular/router

Новый маршрутизатор обрабатывает недостающие маршруты намного лучше с помощью спецификации пути '**'.

В вашем корневом каталоге RouterConfig добавление компонента как catch-all будет ловить неверные маршруты на корневом уровне и внутри любых вложенных дочерних элементов, что означает, что вам нужно только включить его на самом верхнем уровне. Например, пример героев ng2 выглядит следующим образом:

export const routes:RouterConfig = [
  ...HeroesRoutes,
  { path: 'crisis-center', component: CrisisListComponent },
  // Show the 404 page for any routes that don't exist.
  { path: '**', component: Four04Component }
];

В соответствии с комментарием sharpmachine, убедитесь, что все маршруты для всех маршрутов перечислены после любых других маршрутов. Текущий маршрутизатор, по-видимому, основан на маршрутизации "первого совпадения" (экспресс-стиль), а не "специфичности" (стиль nginx), хотя с его уровнем нестабильности это может измениться в будущем. Листинг catch-alls last должен работать в обоих условиях.

Оригинальный ответ для @ angular/router-derecated

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

constructor(
  private _router: Router,
  private _location: Location
) {
  _router.recognize(_location.path()).then((instruction: Instruction) => {
    // If this location path is not recognised we receive a null Instruction
    if (!instruction) {
       // Look up the 404 route instruction
       _router.recognize('/404').then((instruction: Instruction) => {
         // And navigate to it using navigateByInstruction
         // 2nd param set to true to keep the page location (typical 404 behaviour)
         // or set to false to 'redirect' the user to the /404 page 
         _router.navigateByInstruction(instruction, true);
      });
    }
  });
}

Я обнаружил, что этот код также будет работать и для дочерних маршрутов. т.е. если у вас есть /cars/... в вашем RouteConfig, и путь местоположения не соответствует ни одному из ваших дорожек детского автомобиля, вы получите нулевое значение для инструкции родителя. Это означает, что вам нужен только этот код на верхнем уровне, главном компоненте.

Я надеюсь, что в будущем есть более простой и ясный способ сделать это.