在 Angular2 应用程序中使用布局答案

【问题标题】：Working with layouts in Angular2 app在 Angular2 应用程序中使用布局
【发布时间】：2016-12-13 07:33:33
【问题描述】：

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

我的问题场景是：

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

我做了一些研发，但我不明白如何实现它？

请查看以下代码：

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) 应用模块

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) 索引.html

 <my-app>

 </my-app>

任何帮助都将不胜感激！

谢谢！！

【问题讨论】：

单独创建 login-page 路由组件，不要使用 index.html 来显示登录页面，当有人访问您的应用时，如果用户未登录，请导航到登录页面路由。在你的根应用组件中编写此逻辑
在这里发布一些代码你是怎么做的。提出任何解决方案都会很有帮助。
@satendra 请检查代码 sn-p。谢谢

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

【解决方案1】：

从 index.html 中删除所有 CSS，并为登录创建单独的组件，另一个组件说 home 用于其他功能。
分别在 login 组件和 home 组件中加载 login 和 home 的 CSS。

为登录和主页创建单独的路由，将所有其他功能路由放在主页路由中作为子路由。请找到以下代码：

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

使用下面的行导航到子页面：

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

谢谢！！！

【讨论】：

【解决方案2】：

看angular2 component styles

如本参考资料所述：

我们有几种方法可以给组件添加样式：

内嵌在模板 HTML 中

通过设置样式

或带有 CSS 导入的 styleUrls 元数据

此外，我建议您在一个模块中创建像树（层次结构）这样的组件（和路由）。检查用户登录状态您需要一项共享服务（例如 authservice）。

【讨论】：