Desarrollé una aplicación Angular2 usando enrutamiento.

Mi escenario problemático es:

Tengo una página de inicio de sesión que tiene diferentes HTML y CSS. Una vez que inicié sesión correctamente, redirijo a otra página que tiene diferentes HTML y CSS. Pero tengo index.html (página de inicio de sesión) como mi diseño principal. ¿Por lo tanto, necesito entender cómo trabajar con múltiples diseños?

¿He hecho algo de I + D pero no puedo entender cómo implementarlo?

Por favor encuentre el siguiente código:

1) módulo de enrutamiento de aplicaciones

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) Componente de la aplicación

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

3) módulo de aplicación

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>

¡Cualquier ayuda sería muy apreciada!

¡¡Gracias!!

0
Jayakrishnan 13 dic. 2016 a las 10:33

2 respuestas

La mejor respuesta
  • Elimine todo el CSS de index.html y cree un componente separado para el inicio de sesión y otro componente, por ejemplo, inicio para otras funciones.
  • Cargue CSS para inicio de sesión y inicio en el componente de inicio de sesión y el componente de inicio respectivamente.
  • Cree rutas separadas para el inicio de sesión y el hogar, coloque todas las demás rutas de funciones dentro de la ruta de inicio como ruta secundaria. Encuentre el siguiente código:

    {
    path: 'login',
    component: LoginComponent
    },
    {
      path: 'home',
      component: HomeComponent,
      children: [
           {
            path: 'childPage',
            component: childPageComponent
           }]
    }
    
  • Utilice la siguiente línea para navegar a la página secundaria:

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

¡¡¡Gracias!!!

2
Binal Vekariya 21 dic. 2016 a las 14:18

Mira estilos de componentes angulares2

Como se dice en esta referencia:

Tenemos varias formas de agregar estilos a un componente:

  • en línea en la plantilla HTML
  • estableciendo estilos
  • o metadatos styleUrls con importaciones CSS

Además, le recomiendo que cree componentes (y rutas) como árbol (jerarquía) en un módulo. Para comprobar el estado de inicio de sesión del usuario, necesita un servicio compartido (por ejemplo, authservice).

0
Peekbyte 13 dic. 2016 a las 07:50