角度2を使用した子ルーティング

Question

2番めの角度に非常に慣れています。私はLoginとDashboard Pagesで簡単なアプリケーションを構築しようとしていました。アプリケーションのニーズに応じてルーティングを適用する方法を理解する必要があります。

ログインページは独立したルート設定ですが、ログインしたときに、新しい新しいダッシュボードページにはナビゲーションバーとそれ自身の<router-outlet>が付いています。

const routes: Routes = [ 
    { path: '', redirectTo: 'login', pathMatch: 'full' }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register-user', component: RegisterUserComponent }, 
    //APPLICATION ROUTES WITH OWN <router-outlet> 
    { path: '**', redirectTo: 'login' } 
] 

以前の1の角度で、私たちは抽象状態と子の状態でUI-ルータを使用していました。

これをどのように達成できるかお勧めします。

Answer 1

ワーキングplunkr

https://plnkr.co/edit/MqNv6RyQvzsiZTp0Dkpf?p=preview

は、それが自身のルータ、アウトレット& routerLinksを保持する必要があります1 ContainerComponent &を作成します。常にredirectTo

{ path: 'component-two', component: ComponentTwo, 
    children: [ 
     { path: '', redirectTo: 'child-one', pathMatch: 'full' }, 
     { path: 'child-one', component: ChildOne }, 
     { path: 'child-two', component: ChildTwo } 
    ] 
    } 

Answer 2

を使用してanyComponentにロードデフォルトで

は、uがメインモジュール内のサブモジュールがあるとします。メインモジュールの
ので、アプリケーションモジュールとログインサブモジュール

ディレクトリ構造何かがこの

export const routes: Routes = [ 
    { path: '', component:LoginComponent, pathMatch: 'full'}, 
    { path: Constants.LOGINROUTE, component:LoginComponent, pathMatch: 'full'} 
    ]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes,{ useHash: true })], 
    exports: [RouterModule] 
}) 

のように見えます

app.routing.module.ts

およびc login.routing.module.ts

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { path: Constants.LOGINROUTE, component: LoginComponent} 
    ])], 
    exports: [RouterModule] 
}) 
export class LoginRoutingModule {} 

とをorrespondingがcorrespoding

@NgModule({ 
    imports: [RouterModule.forChild([ 
    { path: Constants.DASHBOARDROUTE, component: DashboardComponent} 
    ])], 
    exports: [RouterModule] 
}) 
export class DashboardRoutingModule {} 

次のようになりますdashboard.routing.module.tsがでlogin.routing.module.tsを含めますlogin.module.tsとdashboard.routing.module.tsと同じです。

Answer 3

私はこのプロジェクトを行っています。

この

は、子ルートの遅延ロードするために使用されます。

{ path: 'crisis-center', 
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule' 
}, 

をそして、以下のコードでは、あなたのapp-module.ts fileからcomponentを削除：

あなたのメインapp-routing.module.tsにこのようなloadChildrenを使用する必要があります。

app.module。TS：

@NgModule({ 
     imports: [ RouterModule.forRoot(routes, { useHash: true }) 
     // ,AdminModule 
     ], 
     declarations: [ ], 
     providers: [ ], 
     bootstrap: [ AppComponent ] 
    }) 

アプリ-routing.module.ts：このルートにrouterナビゲートは、それが動的にAdminModuleをロードするためにloadChildren文字列を使用しています今fine.When

export const routes: Routes = [ 
    { path: 'dashboard',     component: DashboardComponent }, 
    { path: 'admin', 
    loadChildren: 'app/admin/admin.module#AdminModule' 
    }, 
    { path: 'crisis-center', 
    loadChildren: 'app/modules/crisis-center/crisis.module#CrisisCenterModule' 
    }, 
    { path: '', redirectTo: '/dashboard', pathMatch: 'full' }, 
    { path: '**',       component: PageNotFound}, 

]; 

。次に、現在のルート設定にAdminModuleルートを追加します。最後に、要求されたルートを宛先管理コンポーネントにロードする。

const crisisCenterRoutes: Routes = [ 
    { 
    path: '', 
    component: CrisisCenterComponent, 
    children: [ 
     { 
     path: '', 
     component: CrisisListComponent, 
     children: [ 
      { 
      path: ':id', 
      component: CrisisDetailComponent, 
      canDeactivate: [CanDeactivateGuard] 
      }, 
      { 
      path: '', 
      component: CrisisCenterHomeComponent 
      } 
     ] 
     } 
    ] 
    } 
]; 

そして同じように、あなたの特定のmodule.tsファイルにすべてのコンポーネントを追加します。あなたはまた、この（子供[]）あなたのroutingファイル内を使用することができますし、それぞれの子ルートの独立したコンポーネントを与えることができます

これは：

import { NgModule     }  from '@angular/core'; 
import { CommonModule    }  from '@angular/common'; 
import { FormsModule    }  from '@angular/forms'; 
import { CrisisCenterRoutingModule }  from './crisis-center-routing.module'; 
import { CrisisCenterComponent  }  from './crisis-center.component'; 
import { CrisisListComponent  }  from './crisis-list.component'; 
import { CrisisDetailComponent  }  from './crisis-detail.component'; 
import { CrisisCenterHomeComponent }  from './crisis-center-home.component'; 
import { CrisisService    }  from './crisis.service'; 

@NgModule({ 
    imports: [ CommonModule,CrisisCenterRoutingModule,FormsModule, ], 
    declarations: [CrisisCenterComponent ,CrisisListComponent,CrisisDetailComponent,CrisisCenterHomeComponent ], 
    providers: [ CrisisService ], 
}) 

export class CrisisCenterModule {}