using_auxiliary_routes.md

Using Auxiliary Routes

Angular 2 supports the concept of auxiliary routes, which allow you to set up and navigate multiple independent routes in a single app. Each component has one primary route and zero or more auxiliary outlets. Auxiliary outlets must have unique name within a component.

To define the auxiliary route we must first add the router outlet where contents for the auxiliary route are to be rendered.

Here's an example:

@Component({
	selector: 'simple-routing',
	directives: [ROUTER_DIRECTIVES]
	template: `<div>
  <!-- ... -->
  <div style="border: 1px solid red;">
  <h3>Default Route Outlet</h3>
    <router-outlet></router-outlet>
  </div>
  <div style="border: 1px solid blue;">
  <h3>Test Aux 1</h3>
    <router-outlet name="testAux1"></router-outlet>
  </div>
  <!-- ... -->
	`
})
@RouteConfig([
  {
    path: '/',
    component: ComponentOne,
    as: 'ComponentOne',
    useAsDefault: true
  },
  {
    aux: 'testAux1',
    component: ComponentOne,
    name: 'TestAux1',
    path: '/aux1'
  },
  {
    aux: 'testAux2',
    component: ComponentTwo,
    name: 'TestAux2',
    path: '/aux2'
  }
])
export class SimpleRouting {

}

Next we must define the link to the auxiliary route for the application to navigate and render the contents.

<a [routerLink]="['./ComponentOne',['TestAux1']]">Test Aux</a>

View Example

Each auxiliary route is an independent route which can have:

• its own child routes
• its own auxiliary routes
• its own route-params
• its own history stack