Работа с макетами в приложении Angular2

Question

Я разработал приложение Angular2 с использованием маршрутизации.

Мой сценарий проблема заключается в:

У меня есть страница входа, которая имеет различный HTML и CSS.Once успешно вошли в систему, перенаправить на другую страницу, которая имеет различный 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) приложение модуля

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

• Удалите все CSS из index.html и создайте отдельный компонент для входа в систему, а другой компонент - дома для других функций.
• Загрузите CSS для входа и дома в компонент входа и домашний компонент соответственно.

• Создайте отдельные маршруты для входа в систему и дома, поместите все другие маршруты функций внутри домашнего маршрута в качестве детского маршрута. Вы найдете ниже код:

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

• Используйте ниже линии, чтобы перейти к детской странице:

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

Спасибо !!!

Answer 2

Посмотрите на angular2 component styles

Как сказан в этой ссылке:

У нас есть несколько способов добавления стилей к компоненту:

• встроенных в шаблоне HTML
• установки стили
• или стилирующиеся метаданные с использованием CSS-импорта

Кроме того, я рекомендую вам создавать компоненты (и маршруты), подобные дереву (иерархии), в одном модуле. Для проверки состояния входа в систему вам нужна одна общая служба (например, authservice).