Angular 2 경로가 존재하지 않는 경우 404 또는 다른 경로로 리디렉션하는 방법

Angular 2 경로가 존재하지 않는 경우 404 또는 다른 경로로 리디렉션하는 방법

이 질문에는 이미 답이 있습니다.

Angular2를 사용한 404 취급 (1개 답변)

마감됨4년 전에.

404호를 리다이렉트 하려고 했는데요/경로가 각도 2에 존재하지 않는 경우 다른 경로

저는 각도 1은 있지만 각도 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/그런 다음 작동하고 빈 페이지를 반환합니다. 이런 종류의 사건을 어떻게 처리합니까?

버전 v2.2.2 이상인 경우

v2.2.2 이상 버전에서는 이름 속성이 더 이상 없으므로 경로를 정의하는 데 사용할 수 없습니다.이름 대신 경로를 사용해야 하며 경로에 선행 슬래시가 필요하지 않습니다.이 경우 사용path: '404'대신에path: '/404':

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

v2.2.2 이전 버전의 경우

사용할 수 있습니다.{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경로.

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' }
];

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';

Not Found Component 구성 요소에 추가합니다.

constructor(public router: Router) { }

그러면 HTML 템플릿에서 참조할 준비가 됩니다.

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

Shaishabroy가 말했듯이, 당신은 치트 시트에서 답을 찾을 수 있습니다.

그러나 그의 대답에서 주어진 반응은 다음과 같습니다.

{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 오류 페이지가 자주 표시됩니다. ;).

확실히, 코드 하단에 쓰여진 이 404 루트를 사용하세요.

구문은 다음과 같습니다.

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

감사해요.

언급URL : https://stackoverflow.com/questions/36260839/angular-2-how-to-redirect-to-404-or-other-path-if-the-path-does-not-exist