CODEWITHSUNDEEP
angulartypescriptangular2-routing
George Edwards
George Edwards

Reputation: 9229

Multiple Angular2 routers in one app (RC5)

In my angular2 application, I have a global router, which navigates through a number of functions, e.g. home and tutorial. Now in my tutorial component, I want to set up another router to navigate through the different steps.

So globally, here are my files:

//main.ts:
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

app.routes.ts:

import { homeComponent } from './home/home.component';
import { tutorialComponent } from './tutorial/tutorial.component';
import { Routes, RouterModule } from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: homeComponent },
  { path: 'tutorial', component: tutorialComponent }
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

and app.component.ts:

import { Component } from '@angular/core';
import { sidebarComponent } from './sidebar/sidebar.component';
import { navbarComponent } from './navbar/navbar.component';
import { homeComponent } from './home/home.component';
import { tutorialComponent } from './tutorial/tutorial.component';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  selector: 'my-app',
  template: `
  <sidebar></sidebar>
  <navbar></navbar>
  <router-outlet></router-outlet>`,
  directives: [sidebarComponent, navbarComponent, homeComponent, ROUTER_DIRECTIVES],
  precompile: [homeComponent, tutorialComponent]
})
export class AppComponent { }

Now in my tutorial component, I would like it to look like this:

@Component({
  selector: 'tutorial',
  template: `
           <a routerLink="/chapter/1" routerLinkActive="active">Chapter 1</a>
           <a routerLink="/chapter/2" routerLinkActive="active">Chaoter 2</a>
           <router-outlet><router-outlet>,
  directives: [chapterComponent, ROUTER_DIRECTIVES]
})
export class tutorialComponent {
    public chapters = _chapters;
    clickedItem: number = 0;
 }

So I am not quite sure how to approach this. Do I need to re-bootstrap, where do I define the routes for my "sub-router"? Maybe I reference this in my original bootstrap, in which case how to I discern between the two routers. I would like this to really act as a subrouter, so when I navigate to the tutorial component currently, my address is myDomain.com/tutorial, I would then like to invoke my subrouter and get to routes like myDomain.coom/tutorial/chapter/1 . The docs state that only one router can be used per template which suggests what I want to do is possible? But there is no mention of what to do for the second one.

Upvotes: 2

Views: 2003

Answers (2)

George Edwards
George Edwards

Reputation: 9229

It turns out that I need to create a child "tutorial" module with its own child routes and then register it into my app.module.ts as described with the crisis center in the Official docs.

Upvotes: 0

Jack Rothrock
Jack Rothrock

Reputation: 427

I maybe a little late to the party, but I found this plunker to be more than helpful when it comes to RC5:

https://angular.io/resources/live-examples/router/ts/plnkr.html

Upvotes: 1

Related Questions