I have developed an Angular2 app using routing.
My problem scenario is:
I have a Login page which has different HTML and CSS.Once successfully logged in, I redirect to another page which has different HTML and CSS. But I have index.html(login page) as my main layout. Hence I need to understand how to work with multiple layouts?
I have done some R&D but I am not able to understand how to implement it?
Please find below code:
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 component
import { Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`
})
export class AppComponent {
constructor() {
}
}
3) App module
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>
Any help would be highly appreciable!
Thanks!!
Create separate routes for login and home,place all other features routes inside home route as child route. Please find below code:
{ path: 'login', component: LoginComponent }, { path: 'home', component: HomeComponent, children: [ { path: 'childPage', component: childPageComponent }] }
Use below line to navigate to child page:
this.router.navigate(['/home/childPage'])
Thanks!!!
Look at angular2 component styles
As said in this reference:
We have several ways to add styles to a component:
- inline in the template HTML
- by setting styles
- or styleUrls metadata with CSS imports
In addition I recommend you create components (and routings) like tree (Hierarchy) in one module. For checking user login status You need one shared service (for example authservice).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.