Multiple layouts in nested routes in Angular (2+)

I'm creating a Dashboard like application. I'd like to achieve the following layout plan in Angular (2+):

route - name - layout
/ - home page - full width layout with tables and charts, etc
/reports - reports page - same full width layout with more tables, etc
/login - login page - no full width layout, just a simple login form at screen center
/signup - signup page - no full width layout, just a simple signup form at screen center
/messages - emails - full width layout
/messages/new - new email - medium layout, not inheriting from full width layout

etc...

So basically what I'd like to do is to completely replace the contents of <body> at some (child) routes.

This is not good for me: multiple layout for different pages in angular 2 because I don't want to redirect / (root) to anywhere like /home.

This one doesn't fit either: How to switch layouts in Angular2

Any help would be great!

You can solve your problem using child routes.

See working demo at https://angular-multi-layout-example.stackblitz.io/ or edit at https://stackblitz.com/edit/angular-multi-layout-example

Set your route like below

const appRoutes: Routes = [

    //Site routes goes here 
    { 
        path: '', 
        component: SiteLayoutComponent,
        children: [
          { path: '', component: HomeComponent, pathMatch: 'full'},
          { path: 'about', component: AboutComponent }
        ]
    },

    // App routes goes here here
    { 
        path: '',
        component: AppLayoutComponent, 
        children: [
          { path: 'dashboard', component: DashboardComponent },
          { path: 'profile', component: ProfileComponent }
        ]
    },

    //no layout routes
    { path: 'login', component: LoginComponent},
    { path: 'register', component: RegisterComponent },
    // otherwise redirect to home
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

Ok I am going to give this a shot...

Routes

Creating routes can be done in multiple ways. You can use child routes or serve the component up directly.

If you want to serve the component up directly this would be ideal,

{ path: '*pathInURL*', component: *NameComponent* }

Direct problems you are facing

Three problems,

Show a component as a child.
Show a component in a template called fullwidth
Show a component in a template called mediumwidth

In your routes.ts

const APP_ROUTES: Routes = [
// landing page of your application
    { path: '', redirectTo: '/home', pathMatch: 'full', },
//anything that will be handled in blank template
    { path: '', component: BlankComponent, data: { title: 'blank Views' }, children: BLANK_ROUTES },
//anything that will be handled in fullwidth
    { path: '', component: FullComponent, data: { title: 'full Views' }, children: FULL_ROUTES },
// anything that will be handled in medium width
    { path: '', component: MediumComponent, data:{ title: 'Medium Views' }, children: MEDIUM_ROUTES }
];

This is going to forward all paths in the URL to look to these routes. It will check the routes to see which template it will fall in.

Then create 3 directories.

/blank

/full

/medium

Inside these folders you will keep your component that use each of the mother templates.

So since login is blank. It would be in /blank

/blank/BlankComonent.ts

Also in each of these directories you will create a routes file which is referred to in the initial routes file we have already created.

/blank/blank.routes.ts

export const BLANK_ROUTES: Routes = [
    { path: 'login', component: LoginComponent }
];

Then in medium the same thing,

/blank/blank.routes.ts

export const MEDIUM_ROUTES: Routes = [
    { path: 'Some/Path', component: SomeMediumComponent }
];

And then the same for FULL_ROUTES

Make a routes file for each directory we created. Add all your routes that live in the same directory and will share the same mother template.

Then we will create a templates directory. Call it /layouts

Now in that direcotry this is where you will create

BlankComponent.ts FullComponent.ts MediumComponent.ts

Each of these components will have their corresponding routes served inside of these templates. Because remember our first routes file says that we will serve all Child Routes to these templates.

So the layouts will be served to the router-outlet

import { Component } from '@angular/core';

@Component({
    selector: 'body',
    template: '<router-outlet></router-outlet>'
})
export class AppComponent { 
}

来源：https://stackoverflow.com/questions/42283235/multiple-layouts-in-nested-routes-in-angular-2

标签

angular

angular2-routing