Angular 2でアプリケーションのさまざまなセクションを管理する方法

Question

this templateを使用しており、ASP.NET領域を使用してアプリケーションを分離したいと考えています。公共エリアと管理エリアを持つウェブサイトがあるとします。今すぐホームエリアを表示することはできますが、管理エリア（公共エリアとはまったく異なるはずです）を表示するための基本レイアウトの変更方法はわかりません。

私は、彼らが一緒よう/admin/**ルートをどのように動作するかわからない角度コンポーネントを使用して、公開ページのための1つを作成し、別の管理ページのためとappコンポーネントにそれらを一緒に接続する必要がなく、理解して何から、対応するコンポーネントににリダイレクトされます（これは独自の基本レイアウトを持っています）。

Answer 1

私は、そのテンプレートについてはよく分からないんだけど、角度でネストされたルートを設定し、このような何か行うことができます。

// app.routing.ts 

const APP_ROUTES: Routes = [ 
    { path: "", component: PublicComponent, 
      children: [ 
      { path: "", component: HomeComponent }, 
      { path: "login", component: LoginComponent }, 
      { path: "join", component: JoinComponent }, 
      { path: “login/forgot-your-password", component: ForgotPasswordComponent }, 
      ] 
    }, 
    { path: "admin", component: AdminComponent, canActivate: [AdminGuard], 
      children: [ 
      { path: “users", component: UsersListComponent }, 
      { path: “secret", component: SecretComponent, canActivate: [SecretGuard] }, 
      { path: “message", component: MessageComponent } 
      ] 
    } 
]; 

---

// app.component.html 

<router-outlet></router-outlet> 

---

// public.component.html 

<header> 
     <app-header></app-header> 
</header> 

<main> 
     <router-outlet></router-outlet> 
</main> 

<footer> 
     <app-footer></app-footer> 
</footer> 

---

// admin.component.html 

<header> 
     <app-admin-header></app-admin-header> 
</header> 

<main> 
     <router-outlet></router-outlet> 
</main> 

を

あなた既にネストされたパスにも子が必要な場合は、さらにネストすることができます。