はログインを作成ページ

Question

をロードするためにどのように私は私のAngular2アプリの主な構成要素については、以下のテンプレートを作成しました。ここで

は私app.routing.tsファイルです：

import {Routes, RouterModule} from '@angular/router'; 
import {Page1Component} from './components/page1/page1.component'; 
import {Page2Component} from './components/page2/page2.component'; 
import {Page3Component} from './components/page3/page3.component'; 
import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component'; 

const appRoutes: Routes = [ 
    { path: '', component: Page1Component }, 
    { path: 'page2', component: Page2Component }, 
    { path: 'page3', component: Page3Component }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

export const appRoutingProviders: any[] = []; 

export const routing = RouterModule.forRoot(appRoutes); 

今私は、アプリのセクションと内容を見ていない（=ユーザーがアプリにログインしていません）ゲストユーザを作るLoginComponentを追加します。したがって、ログインコンポーネントは前のテンプレートの代わりにページを読み込む必要があります。

だから、

<header></header> 
<div class="welcome"> 
    <login></login> 
</div> 
<footer></footer> 

、私のルーティングシステムに追加して、そのようなので、上のサイドバー、topbarやなどの他のコンポーネントをロードするために防ぐ方法：たとえば、そのテンプレートには、次のだろうか？

Answer 1

あなたのエントリは次のようになります。すべてのユーザーを含む

<router-outlet></router-outlet>  
<footer></footer> 

そして、ログイン・コンポーネントがロードされたり主成分は...

を参照するかでユーザーの状態を保存する必要があります変数を設定して、次のようにしてください。

<header> 
    <topbar *ngIf="userIsLoggedIn"></topbar> 
</header> 

<div class="middle"> 
    <sidebar *ngIf="userIsLoggedIn"></sidebar> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
</div> 

<footer></footer>