How to properly configure route parameters at named points in Angular 2

Question

To force the route parameter to router-outler:

this.router.navigate(['/hero', hero.id]);

How can I set the route parameter at named points?

this.router.navigate([{ outlets:{modal: 'modal/user'} }]);

Right now I'm concatenating a string to set the route parameter:

this.router.navigate([{ outlets: {modal: 'modal/user' + '/' + 'this.id'} }]);

Answer 1

make sure your routing file has: id in the modal component like this in my

{ path: 'component-aux/:id', component: ComponentAux, outlet: 'sidebar' }

and your call route should look like this

id: string="any value you want to set";
this.id= input || 'not set';

|| will set the default value if no value is specified

 <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux', this.id] } }]">Component Aux</a>

and your aux component should look like this

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

@Component({
  selector: 'component-aux',
  template: 'Component Aux'
})
export default class ComponentAux { 
  private id;
  private sub: any;
  constructor(private route: ActivatedRoute) {}

  private ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      this.id = +params['id']; // (+) converts string 'id' to a number
      console.log(this.id);
    });
  }

  private ngOnDestroy() {
    this.sub.unsubscribe();
  }

}

live plnkr https://plnkr.co/edit/5aP6MgTRzXr5Urq5fr2J?p=preview. , :)