在Angular2應用中使用布局

Question

我已經開發了使用路由的Angular2應用程序。

我的問題場景是：

我有一個具有不同HTML和CSS的登錄頁面。成功登錄后，我將重定向到另一個具有不同HTML和CSS的頁面。 但是我將index.html（登錄頁面）作為主要布局。 因此，我需要了解如何使用多種布局？

我已經進行了一些研發，但是我不知道如何實現它？

請找到以下代碼：

1）app.routing.module

import { NgModule } from '@angular/core';
import { Routes, Router, RouterModule } from '@angular/router';
import { AuthGuard } from './guards/auth.guard';
import { LoginComponent } from './components/login/login.component';

const routes: Routes = [
{
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
},
{
    path: 'login',
    component: LoginComponent
},
{
    path: 'employee',
    component: EmployeeComponent,
    canActivate: [AuthGuard]
}];
export class AppRoutingModule {   }
export const routedComponents = [LoginComponent,EmployeeComponent];

2）App組件

import { Component} from '@angular/core';
@Component({
           selector: 'my-app',
           template: `
          <router-outlet></router-outlet>
          `
          })
export class AppComponent {
        constructor() {
        }
}

3）App模塊

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {HttpModule} from '@angular/http';
import { AppComponent }   from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthGuard } from './guards/auth.guard';


 @NgModule({
     imports: [BrowserModule,
               HttpModule,
               AppRoutingModule
      ],
     declarations: [AppComponent,
                    routedComponents
     ],
     providers: [AuthGuard],
     bootstrap: [AppComponent]

    })
 export class AppModule { }

4）Index.html

 <my-app>

 </my-app>

任何幫助將是非常可觀的！

謝謝！！

Answer 1

• 從index.html刪除所有CSS，並創建用於登錄的單獨組件，並為其他功能創建另一個組件。
• 在登錄組件和家庭組件中分別為登錄和家庭加載CSS。

• 創建用於登錄和歸屬的單獨路由，將所有其他功能路由放置在歸屬路由內作為子路由。 請找到以下代碼：

   { path: 'login', component: LoginComponent }, { path: 'home', component: HomeComponent, children: [ { path: 'childPage', component: childPageComponent }] } 

• 在下面的行中導航到子頁面：

   this.router.navigate(['/home/childPage']) 

謝謝！！！

Answer 2

看一下angular2組件樣式

如本參考資料中所述：

我們有幾種向樣式添加樣式的方法：

• 內聯在模板HTML中
• 通過設置樣式
• 或帶有CSS導入的styleUrls元數據

另外，我建議您在一個模塊中創建諸如樹（層次結構）之類的組件（和路由）。 用於檢查用戶登錄狀態您需要一項共享服務（例如authservice）。