How can I dynamically position the <router-outlet> depending on the url called?

Question

I have a complex interface where I have a list of dynamic items (imagine an accordion widget) in a page (here about page) and when I call this url :

/about/item/1

it "routes" to one of the accordion item and loads the content in the clicked list item (one item of the accordion).

Specifically, what I want to do is this :

@Component({
    selector: 'app-about',
    template: `
      <ul>
          // dynamic list
          <li>
              <a [routerLink]="['/about/item', 1]">Item 1</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/1
          </li>
          <li>
              <a [routerLink]="['/about/item', 2]">Item 2</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/2
          </li>
      </ul>         
    `
})
export class AboutComponent { }

I'm using angular : 2.0.0-rc.4, angular/router: 3.0.0-beta.2

It doesn't seem to be the right practice. How can I do that the "angular way" ?

Thanks a lot

Answer 1

You could give the router-outlets names and define the name on the route which outlet the component should be added to

<router-outlet name="a"></router-outlet>
<router-outlet name="b"></router-outlet>

{ path: 'a', component: A, outlet: 'a'}
{ path: 'b', component: B, outlet: 'b'}

See also

• https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html
• https://angular.io/docs/ts/latest/guide/router.html