在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）。