2017-01-23 10 views
0

の経路のparamを解決するためにはどうすればルートの設定を持っているは角2

私は :categoryルートのparam値は、データベース内の検索カテゴリとして存在している場合ので、それ以外は(404ページに移動し、ルート活性化させる場合は、チェックする必要があり
const appRoutes: Routes = [ 
    { path: '', loadChildren: 'app/+home/home.module#HomeModule' }, 
    { path: 'auth', loadChildren: 'app/+auth/auth.module#AuthModule' }, 
    { path: ':category', loadChildren: 'app/+search/search.module#SearchModule' }, 
    { 
    path: '**', 
    component: PageNotFoundComponent, 
    data: { title: 'Page not found' } 
    }, 
]; 

この場合はPageNotFoundComponent)。

CanActivateを使用するのが最適ですか? 404ページへの移動はどうですか?

+1

あなたはおそらく、https://angular.io/docs/ts/latest/guide/router.html#!#guards –

答えて

1

はい、CanActivateガードを使用できます。その後

{ 
    path: ':category', 
    loadChildren: 'app/+search/search.module#SearchModule' 
    canActivate: [CanActivateCategory] 
}, 

、ガードの内側にリダイレクトを実行します。

@Injectable() 
class CanActivateCategory implements CanActivate { 

    constructor(private router: Router, 
       private categoryService: CategoryService) {} 

    canActivate(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
): Observable<boolean>|Promise<boolean>|boolean { 
    const obs = this.categoryService.categoryExists(route.params['category']); 
    obs.subscribe((exists: boolean) => { 
     if (!exists) this.router.navigate('/404'); 
    }); 
    return obs; 
    } 
} 

このコードを使用すると、カテゴリの存在を確認するためにCategoryServiceを持っていることを前提とし、そしてあなたがパスのルートを宣言していることを/404

最終ノート:現在の:categoryのデータをあらかじめロードする必要がある場合は、このコードをResolveに入れてください。そうすれば、データをあらかじめロードしたり、データが見つからない場合は、/404にリダイレクトして、すべてを1か所で実行できます。

+0

を探しています。したがって、私は404ルートパスを '**'から' 404'に変更する必要があります? – neilhem

+1

ああ、あなたのコードで '**'ルートを見逃しました。まあ、ユーザーを「見つからない」ページに明示的にリダイレクトできるようにしたいのであれば、それは '404'のような特定のパスを持つ方が良いでしょう。あなたは 'redirectTo: '404'を使って' ** 'ルートを保持することができます。 – AngularChef