【问题标题】：Routes with params Angular 6带有参数Angular 6的路线
【发布时间】：2019-04-21 00:34:56
【问题描述】：

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

假设在我的路由中我定义了演示组件有一个参数，该参数是我通过[routerLink] 行中的按钮传递给它的。但在控制台中，我觉得参数是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() { }

}

【问题讨论】：

Route params subscribe 是异步的，你根本无法在语句之后访问 console.log，因为它总是在订阅之前解析。至少将订阅放在订阅正文中。
喜欢吗？ link
是的，就记录屏幕截图显示正确放置的参数而言。

标签： angular routes angular6

【解决方案1】：

首先@AlexanderStaroselsky 是正确的，console.log 应该在订阅中

而且你的 button-menu.component.html 也是错误的，如果 mics 是对象，您应该使用 mics 的属性而不是传递整个对象

这个

[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>

【讨论】：

你的意思是......像这样的东西？ <button *ngFor="let mics of Microfonos" class="dropdown-item beige text-center" type="button" [routerLink]="['/presentacion',mics.nombre]">{{mics.nombre}}</button>我把console.log放在subscribe里面，但还是显示未定义。
是的，请检查您的服务的麦克风值，我认为它有问题

【解决方案2】：

试试下面的代码：

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

            }
        };

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

【讨论】：