时间戳

首页 > 解决方案 > 带有参数Angular 6的路线

angular - 带有参数Angular 6的路线

问题描述

我有一个组件，它是一个按钮，它将对象存储在一个名为Microphones. 我希望按钮将对象传递给另一个组件，然后显示该特定对象的详细信息。但这对我不起作用。

假设在我的路由中，我定义了演示组件有一个参数，该参数是我通过[routerLink]. 但在控制台中，在我看来参数是undefined.

按钮菜单.component.ts

export class ButtonMenuComponent implements OnInit {

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

  micObj:any

  constructor() { }

  ngOnInit() { }

}

按钮菜单.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>

应用程序路由模块.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() { }

}

标签： angularroutesangular6

解决方案

试试下面的代码：

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

            }
        };

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

推荐阅读