2016-11-15 15 views
1

私は子供の経路を使用しようとしています。私の主なルーティングモジュール(ルートディレクトリに):angular2 route for notFoundページ

import { NgModule }    from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { HomeComponent } from './home/home.component'; 
import { ProfileComponent } from './profile/profile.component'; 
import { NotFoundComponent } from './notfound/notfound.component'; 
import { LoggedInGuard } from './login-guard/login-guard.component'; 

const routes: Routes = [ 
    {path: '', redirectTo: 'home', pathMatch: 'full'}, 
    {path: 'home', component: HomeComponent, pathMatch: 'full'}, 
    {path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard], canLoad: [LoggedInGuard]}, 
    {path: '**', component: NotFoundComponent}, 
]; 
@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

と子(サブディレクトリにある)、ルーティングモジュール:

import { NgModule }  from '@angular/core'; 
import { RouterModule } from '@angular/router'; 

import { PPComponent } from './pp.component'; 
import { MembersComponent } from './members/members.component'; 
import { HistoryComponent } from './history/history.component'; 


@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { 
     path: 'partner-program', 
     component: PPComponent, 
     children: [ 
      { 
      path: '', 
      redirectTo: 'members', 
      pathMatch: 'full' 
      }, 
      { 
      path: 'members', 
      component: MembersComponent, 
      }, 
      { 
      path: 'history', 
      component: HistoryComponent, 
      }, 
     ] 
     }, 


    ]) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class PPRoutingModule { } 

私はこのルート{path: '**', component: NotFoundComponent}について質問があります。 Angular2は、子供のルートの前にこのルートを表示します。結果として、URL 'http://localhost:3000/partner-program'はnotFoundコンポーネントを表示します。 notFoundルートを削除すると、 'http://localhost:3000/partner-program'が問題なく動作します。 notFoundルートを宣言し、Angular2が最後のターン(子ルートの後)でそれをチェックする方法を教えてください。

GünterZöchbauer、これはどういう意味ですか?

RouterModule.forChild([ 
     { 
     path: '', 
     children: [ 
      { 
      path: 'partner-program', 
      component: PPComponent, 
      children: [ 
       { 
       path: '', 
       redirectTo: 'members', 
       pathMatch: 'full' 
       }, 
       { 
       path: 'members', 
       component: MembersComponent, 
       }, 
       { 
       path: 'history', 
       component: HistoryComponent, 
       }, 
      ] 
      } 
     ] 
     } 
    ]) 
+0

あなたの 'PPRoutingModule'ルートは、子ルートとして適切に設定されていないと思います。子ルートは親ルートの子でなければなりません。 '' http:// localhost:3000/partner-program ''は' {path:' '、redirectTo:' home '、pathMatch:' full '}、 '(空のパス)の子ルートの場合にのみ一致します。そうではありません。 –

答えて

5

これらのモジュールをメインモジュールにインポートするときは、最後にAppRoutingModuleが追加されていることを確認してください。それは経路登録の順序に関するものです。

+0

omg、ありがとう。できます! –