ランディングページとダッシュボードの経路がAngular2で異なる

Question

ブログのサイトを角2で開発中です。 ユーザーが自分のサイトにアクセスしたときに、ランディングページにサインアップ/ログインフォームを表示したい場合は、 。

は、ユーザーがログインしたときに今、彼らは/ダッシュボードにリダイレクトされ、起動する方法を今のメニューやヘッダとコンテンツ

を参照してください。 2つのルータ - アウトレットを使用することは可能ですか？

申し込みレイアウト画像：http://prntscr.com/dwh1qg

ダッシュボードレイアウト：http://prntscr.com/dwh2lp

Answer 1

各コンポーネントは、ルータ出口を含むことができます。

DashboardコンポーネントとDefaultコンポーネントへのルートを含むAppコンポーネントを作成する必要があると思います。これらのコンポーネントでは、router-outletを配置して、異なるルートを作成する必要があります。

このようにして、コンポーネントのグループごとに異なるテンプレートを作成できます。

@RouteConfig([ 
    { path: '/dahsboard/...', name: 'Dashboard', component: DashboardComponent }, 
    { path: '/...', name: 'Default', component: DefaultComponent } 
]) 
export class AppComponent 

このコンポーネントのテンプレートは、<router-outlet></router-outlet>と同じくらい簡単です。

次に、子コンポーネントのルーティングとテンプレートが異なる場合があります。

@RouteConfig([ 
    { path: '/home', name: 'Home', component: HomeComponent }, 
    { path: '/sign-up', name: 'SignUp', component: SignupComponent } 
]) 
export class DefaultComponent 

また、テンプレートには<router-outlet></router-outlet>も含まれている必要があります。