[英]How can I programmatically pass parameters to an auxiliary route in angular2+?
Using angular2, I want to open an auxiliary route programmatically in my component.使用angular2,我想在我的组件中以编程方式打开一个辅助路由。
This code opens the route with the 'list' path and it opens the route in the correct named router outlet, but I am not sure how to pass parameters to the route:此代码使用“列表”路径打开路由,并在正确命名的路由器出口中打开路由,但我不确定如何将参数传递给路由:
this.router.navigate(['./', { outlets: { 'list-outlet': 'list' } }]);
The route for the component that displays the details for a specific product would need a route parameter for the ID
of that product.显示特定产品详细信息的组件的路由需要该产品
ID
的路由参数。 We could implement this using the following Routes:我们可以使用以下路由来实现:
export const routes: Routes = [
{ path: '', redirectTo: 'product-list', pathMatch: 'full' },
{ path: 'product-list', component: ProductList },
{ path: 'product-details/:id', component: ProductDetails }
];
Note :id
in the path of the product-details
route, which places the parameter in the path.注意
:id
在product-details
路由的路径中,将参数放在路径中。 For example, to see the product-details
page for product with ID
5, you must use the following URL: localhost:3000/product-details/5
Linking to Routes with Parameters例如,要查看
ID
5 的product-details
页面,您必须使用以下 URL: localhost:3000/product-details/5
Linking to Routes with Parameters
In the ProductList
component you could display a list of products.在
ProductList
组件中,您可以显示产品列表。 Each product would have a link to the product-details
route, passing the ID
of the product:每个产品都有一个链接到
product-details
路由,传递产品的ID
:
<a *ngFor="let product of products"
[routerLink]="['/product-details', product.id]">
{{ product.name }}
</a>
Note that the routerLink
directive passes an array which specifies the path and the route parameter.请注意,
routerLink
指令传递一个数组,该数组指定路径和路由参数。 Alternatively we could navigate to the route programmatically:或者,我们可以以编程方式导航到路线:
goToProductDetails(id) {
this.router.navigate(['/product-details', id]);
}
The ProductDetails
component must read the parameter, then load the product based on the ID
given in the parameter. ProductDetails
组件必须读取参数,然后根据参数中给定的ID
加载产品。 The ActivatedRoute service provides a params
Observable which we can subscribe to to get the route parameters (see Observables) 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();
}
}
The reason that the params
property on ActivatedRoute is an Observable is that the router may not recreate the component when navigating to the same component. ActivatedRoute 上的
params
属性是 Observable 的原因是路由器在导航到同一组件时可能不会重新创建组件。 In this case the parameter may change without the component being recreated.在这种情况下,参数可能会更改,而无需重新创建组件。
In the end, I just needed to use an array to pass my params... See param1
and param2
below.最后,我只需要使用一个数组来传递我的参数...请参阅下面的
param1
和param2
。
this.router.navigate(['./', { outlets: { 'list-outlet': ['list', param1, param2]} }]);
Note... I had to change the path in my routing configuration:注意...我必须更改路由配置中的路径:
{
path: 'list/:param1/:param2',
component: ClaimListComponent,
outlet: 'list-outlet'
}
And then in my ngOnInit
function, I can pull the params out of the router as Muirik shows.然后在我的
ngOnInit
函数中,我可以如 Muirik 所示将参数从路由器中拉出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.