带有参数 Angular 6 的路由

Question

I have a component that is a button and that stores objects in a variable called Microphones . And I want the button to pass the object to another component and then show details of that specific object. But it is not working for me.

It is assumed that in my routes I define that the presentation component has a parameter, that parameter I passed it with the button from the line of [routerLink] . But in the console it appears to me that the parameter is undefined .

button-menu.component.ts

export class ButtonMenuComponent implements OnInit {

  @Input()Microfonos:any;
  @Input()NombreClasificacion:any;

  micObj:any

  constructor() { }

  ngOnInit() { }

}

button-menu.component.html

<div class="btn-group dropright">
    <button type="button" class="btn beige dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">{{NombreClasificacion}}</button>
    <div class="dropdown-menu dropdown-menu-lg-left">
        <button *ngFor="let mics of Microfonos" class="dropdown-item beige text-center" type="button" [routerLink]="['/presentacion',mics]">{{mics.nombre}}</button>
    </div>
</div>

app-routing-module.ts

const routes: Routes = [
  {
  path:'menu',
  component: MainComponent,
  },
  {
    path:'bajo',
    component: MenuBajoComponent
  },
  {
    path:'guitarra',
    component: MenuGuitarraComponent
  },
  {
    path:'presentacion/:objMic',
    component:PresentacionMicComponent
  }
];

export class PresentacionMicComponent implements OnInit {

  objMic:any;

  constructor(private rutaActiva:ActivatedRoute) { 
    this.rutaActiva.params.subscribe( params => {
      this.objMic = params['mics'];
    });
    console.log(this.objMic);
  }

  ngOnInit() { }

}

Answer 1

first of all @AlexanderStaroselsky is right console.log should be in subscribe

and your button-menu.component.html is wrong too, if mics is object you should use an property of mics not pass the whole object

this

[routerLink]="['/presentacion',**mics**]


<div class="btn-group dropright">
    <button type="button" class="btn beige dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">{{NombreClasificacion}}</button>
    <div class="dropdown-menu dropdown-menu-lg-left">
        <button *ngFor="let mics of Microfonos" class="dropdown-item beige text-center" type="button" [routerLink]="['/presentacion',**mics**]">{{**mics.nombre**}}</button>
    </div>
</div>

Answer 2

Try below code:

let navigationExtras: NavigationExtras = {
            queryParams: {
                "par1": parVal1,
                "par2": parVal2,
                "par3": parVal3

            }
        };

this.router.navigate(['/componentName'], navigationExtras)