Как программно передать параметры на вспомогательный маршрут в angular2?

используя angular2, я хочу открыть вспомогательный маршрут программно в моем компоненте.

этот код открывает маршрут с путем "list", и он открывает маршрут в правильной названной розетке маршрутизатора, но я не уверен, как передать параметры маршруту:

this.router.navigate(['./', { outlets: { 'list-outlet': 'list' } }]);
7
angular angular2-routing

2 ответов

для маршрута компонента, который отображает сведения для конкретного продукта, потребуется параметр маршрута для ID этого продукта. Мы могли бы реализовать это, используя следующие маршруты:

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails }
];

Примечание :id на пути product-details маршрут, который помещает параметр в путь. Например, чтобы увидеть product-details страница для товара с ID 5, Вы должны использовать следующий URL:localhost:3000/product-details/5 Связывание с маршрутами с параметрами

в ProductList компонент вы можете отобразить список продуктов. Каждый продукт будет иметь ссылку на product-details маршрут, передает ID продукт:

<a *ngFor="let product of products"
  [routerLink]="['/product-details', product.id]">
  {{ product.name }}
</a>

отметим, что routerLink директива передает массив, который задает путь и параметр маршрута. В качестве альтернативы мы могли бы перейти к маршруту программно:

goToProductDetails(id) {
  this.router.navigate(['/product-details', id]);
}

на ProductDetails компонент должен прочитать параметр, а затем загрузить продукт на основе ID задано в параметре. Этот Служба ActivatedRoute предоставляет params Observable, на который мы можем подписаться, чтобы получить параметры маршрута (см. Observables)

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

@Component({
  selector: 'product-details',
  template: `
    <div>
      Showing product details for product: {{id}}
    </div>
  `,
})
export class LoanDetailsPage implements OnInit, OnDestroy {
  id: number;
  private sub: any;

  constructor(private route: ActivatedRoute) {}

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

       // In a real app: dispatch action to load the details here.
    });
  }

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

причина в том, что params свойство на ActivatedRoute является наблюдаемым является то, что маршрутизатор не может воссоздать компонент при переходе к тому же компоненту. В этом случае параметр может изменяться без воссоздания компонента.

пример Plunkr

информация от здесь

13

в конце концов, мне просто нужно было использовать массив для передачи моих параметров... См.param1 и param2 ниже.

this.router.navigate(['./', { outlets: { 'list-outlet': ['list', param1, param2]} }]);

Примечание... Мне пришлось изменить путь в моей конфигурации маршрутизации:

{
    path: 'list/:param1/:param2',
    component: ClaimListComponent,
    outlet: 'list-outlet'
}

а затем в ngOnInit функция, я могу вытащить параметры из маршрутизатора, как показывает Muirik.

9