使用Angular2应用程序中的布局

时间:2016-12-13 07:33:34

标签: angular angular2-routing angular2-components angular2-modules

我使用路由开发了一个Angular2应用程序。

我的问题场景是:

我有一个具有不同HTML和CSS的登录页面。一旦成功登录,我将重定向到另一个具有不同HTML和CSS的页面。 但我有index.html(登录页面)作为我的主要布局。因此,我需要了解如何使用多个布局?

我做过一些R& D但是我无法理解如何实现它?

请在下面找到代码:

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)应用程序组件

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>

任何帮助都会非常值得赞赏!

谢谢!

2 个答案:

答案 0 :(得分:2)

  • 从index.html中删除所有CSS并为登录创建单独的组件,并为另一个组件说明其他功能。
  • 分别在登录组件和主组件中加载登录和主页的CSS。
  • 为登录和归位创建单独的路由,将所有其他功能路由作为子路由放置在归属路由中。 请找到以下代码:

    {
    path: 'login',
    component: LoginComponent
    },
    {
      path: 'home',
      component: HomeComponent,
      children: [
           {
            path: 'childPage',
            component: childPageComponent
           }]
    }
    
  • 使用以下行导航到子页面:

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

感谢!!!

答案 1 :(得分:0)

查看angular2 component styles

如本参考文献所述:

  

我们有几种方法可以为组件添加样式:

     
      
  • 内联于模板HTML
  •   
  • 通过设置样式
  •   
  • 或带有CSS导入的styleUrls元数据
  •   

此外,我建议您在一个模块中创建树(层次结构)之类的组件(和路由)。用于检查用户登录状态您需要一个共享服务(例如authservice)。