Блог

Главная - Вопросы по программированию - Маршруты с параметрами Angular 6

Маршруты с параметрами Angular 6

#angular #routes #angular6

#angular #маршруты #angular6

Вопрос:

У меня есть компонент, который является кнопкой и который хранит объекты в вызываемой переменной Microphones . И я хочу, чтобы кнопка передавала объект другому компоненту, а затем показывала детали этого конкретного объекта. Но у меня это не работает.

Предполагается, что в моих маршрутах я определяю, что у компонента представления есть параметр, этот параметр я передал с помощью кнопки из строки [routerLink] . Но в консоли мне кажется, что параметр есть undefined .

кнопка-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() { }

}

Комментарии:

1. Подписаться на параметры маршрута асинхронно, вы просто не сможете утешить. регистрируйтесь после инструкции, потому что она всегда будет разрешаться до подписки. Как минимум, поместите subscribe внутри тела subscribe.

2. Нравится tihs? Ссылка

3. Да, с точки зрения регистрации параметров этот скриншот демонстрирует правильное размещение.

Ответ №1:

прежде всего, @AlexanderStaroselsky — это правильная консоль.журнал должен быть в subscribe

и ваш 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>

Комментарии:

1. Вы имеете в виду … что-то вроде этого? <button *ngFor="let mics of Microfonos" class="dropdown-item beige text-center" type="button" [routerLink]="['/presentacion',mics.nombre]">{{mics.nombre}}</button> Я поставил консоль. войдите в подписку, но она по-прежнему не определена.

2. да, проверьте свой сервис на наличие значения mics, я думаю, что с ним что-то не так

Ответ №2:

Попробуйте следующий код:

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

            }
        };

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