Как передать и получить параметр с routerLink в Angular 2?

Question

Я хочу передать значение с помощью url, используя routerLink. И прочитайте это значение на другой странице. Как у меня есть список продуктов. При выборе первой записи идентификатор этой записи переходит на страницу сведений о продукте. После прочтения этого продукта я хочу показать детали этого продукта.

Так как я могу пройти и получить параметр?

Answer 1

я предположим, что у вас есть такой код:

{ path: 'product/:id', component: ProductDetailComponent } 

в ProductL IST шаблон

<a [routerLink]="['/product', id]">Home</a> 

или

<a [routerLink]="['/product', 5]">Home</a> 

где id является переменной, может быть, вы получили его в петлю. документ

constructor(
    private route: ActivatedRoute, 
    private router: Router 
) {} 
ngOnInit() { 

    this.route.params 
    // (+) converts string 'id' to a number 
    .switchMap((params: Params) => this.yourProductService.getProductById(+params['id'])) 
    .subscribe((product) => this.product = product); 
} 

Router::

в ProductDetailComponent https://angular.io/docs/ts/latest/guide/router.html

Answer 2

Используйте routerLink на своем a тег для передачи по url.

[routerLink]="['yourRouteHere', {'paramKey': paramValue}] 

Для его использования вам необходимо использовать услугу ActivatedRoute. Внесите его в свой компонент и используйте его метод подписки. Вот мой route является впрыскивается служба

this.route.params.subscribe(params => { 
    const id = Number.parseInt(params['paramKey']); 
} 

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

Answer 3

1. Пусть ваш URL является HTP: //abc.com/xyz и желаемый результат HTP: //abc.com/zyx/users?id=1, то используйте нижеприведенный код

<a [routerLink]="['user']" [queryParams]="{id: 1}" </a> 

2 .suppose Ваш URL является HTP: //abc.com/xyz и ваш желаемый результат HTP: //abc.com/users ID = 1 использование ниже кода

<a [routerLink]="['/user']" [queryParams]="{id: 1}" </a>