web-dev-qa-db-ja.com

Angular 2パスが存在しない場合に404​​または他のパスにリダイレクトする方法

パスがangular 2に存在しない場合、404 /他のパスをリダイレクトしようとしました

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/にリダイレクトすると動作し、空のページが返されます。このような場合はどのように処理しますか？

javascriptangularangular2-routing
60
Jason Seah

バージョンv2.2.2以降の場合

バージョンv2.2.2以降では、nameプロパティは存在しないため、ルートの定義に使用しないでください。 pathの代わりにnameを使用する必要があり、に先行スラッシュは不要ですパス。この場合、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パスにリダイレクトします

146
Shaishab Roy

Angularがリリースに移行すると、この同じ問題に直面しました。バージョンごと2.1.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' }
];
25
nuvio

2.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.

18
robnordon

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エラーページが表示されることがよくあります;）。

9
Wetteren Rémi

コードの最後に書いたこの404ルートを使用してください。

構文は次のようになります

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

ありがとうございました

0
Harikrishnan k