如何加載創建登錄頁面

Question

我為Angular2應用程序的主要組件創建了以下模板：

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

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

<footer></footer>

正如您所看到的，我將Angular 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>

然后加載登錄組件或者包含所有用戶應該看到的main-component。

或者將用戶狀態存儲在變量中並執行以下操作：

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

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

<footer></footer>