如何加載

Question

一個創建登錄頁面

我創造了我的Angular2應用程序的主要成分下面的模板：

<header> 
    <topbar></topbar> 
</header> 

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

<footer></footer> 

正如你可以看到，我把我的角router在模板內，該main標籤下。

這裏是我的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> 

那麼，如何將它添加到我的路由系統，並防止加載其他組件，如側欄，頂欄等？

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>