Angular 2 Как перенаправить на 404 или другой путь, если путь не существует

Я пытался перенаправить 404 / другой путь, если путь не существует в angular 2

Я пробовал исследование, есть какой-то метод для angular 1, но не angular 2.

Вот мой код:

@RouteConfig([
{
    path: '/news',
    name: 'HackerList',
    component: HackerListComponent,
    useAsDefault: true
},
{
    path: '/news/page/:page',
    name: 'TopStoriesPage',
    component: HackerListComponent
},
{
    path: '/comments/:id',
    name: 'CommentPage',
    component: HackerCommentComponent
}
])

Итак, если я перенаправляюсь на /news/page/, тогда он работает, и он возвращает мне пустую страницу, как вы справляетесь с таким случаем?

Ответы

Ответ 1

вы можете использовать {path: '/*path', redirectTo: ['redirectPathName']}

как:

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

Если путь не совпадает, перенаправление на NotFound путь

Обновлено для v2.2.2

В маршрутизации версии v2.2.2 name свойства больше не существуют. маршрут определяют без свойства имя. так что вы должны использовать путь вместо имени redirectTo: '/redirectPath' и не использовать косую черту для пути, поэтому используйте path: '404' вместо path: '/404'

как:

 {path: '404', component: NotFoundComponent},
 {path: '**', redirectTo: '/404'}

Ответ 2

Поскольку Angular перешел к выпуску, я столкнулся с этой же проблемой. Согласно версии 2.1.0 интерфейс Route выглядит следующим образом:

export interface Route {
    path?: string;
    pathMatch?: string;
    component?: Type<any>;
    redirectTo?: string;
    outlet?: string;
    canActivate?: any[];
    canActivateChild?: any[];
    canDeactivate?: any[];
    canLoad?: any[];
    data?: Data;
    resolve?: ResolveData;
    children?: Route[];
    loadChildren?: LoadChildren;
}

Итак, мои решения были следующими:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: '404', component: NotFoundComponent },
    { path: '**', redirectTo: '404' }
];

Ответ 3

Мой предпочтительный вариант в 2.0.0 и выше - это создать маршрут 404, а также разрешить путь маршрута ** к тому же компоненту. Это позволяет вам регистрировать и отображать дополнительную информацию о недействительном маршруте, а не простое перенаправление, которое может скрыть ошибку.

Пример простого 404:

{ path '/', component: HomeComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

Чтобы отобразить неверную информацию маршрута, добавьте импорт в маршрутизатор в NotFoundComponent:

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

Добавьте его в конструктор NotFoundComponent:

constructor(public router: Router) { }

Затем вы готовы ссылаться на него из вашего шаблона HTML, например.

The page <span style="font-style: italic">{{router.url}}</span> was not found.

Ответ 4

Как говорит shaishab roy, в чит-листе вы можете найти ответ.

Но в своем ответе данный ответ был:

{path: '/home/...', name: 'Home', component: HomeComponent}
{path: '/', redirectTo: ['Home']},
{path: '/user/...', name: 'User', component: UserComponent},
{path: '/404', name: 'NotFound', component: NotFoundComponent},

{path: '/*path', redirectTo: ['NotFound']}

По некоторым причинам, это не работает на моей стороне, поэтому я попытался вместо этого:

{path: '/**', redirectTo: ['NotFound']}

и он работает. Будьте осторожны и не забывайте, что вам нужно положить его в конец, иначе у вас будет страница ошибок 404;).

Ответ 5

Сделайте свой маршрут по умолчанию своим 404 или страницей с помощью контроллера, который выполняет жесткую переадресацию JavaScript.

Ответ 6

убедитесь, что этот маршрут 404 написан в нижней части кода.

синтаксис будет как

{
    path: 'page-not-found', 
    component: PagenotfoundComponent
},
{
    path: '**', 
    redirectTo: '/page-not-found'
},

Спасибо