typescript Angular2 ActivatedRoute 参数未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42323644/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular2 ActivatedRoute parameter is undefined
提问by Geoff
Am trying to display the value of activate route param in the screen but fails
我试图在屏幕上显示激活路由参数的值但失败
In the first component i have
在第一个组件中，我有
<ul *ngFor="let cate of categories;">
<li (click)="onviewChecklists(cate.id)">
<a> {{i+1}} {{cate.category}} </a>
</li>
</ul>
onviewChecklists(category:string){
this._router.navigate(["tsafety/checklist-management/categories/items",
{category:category}])
}
Now on the second component to where am naviagting i have
现在在我导航的第二个组件上
category:any;
constructor(
private _router:Router,private activeRoute:ActivatedRoute
) {
}
ngOnInit() {
this.category = this.activeRoute.snapshot.params['category'];
console.log(this.category); //this works
}
//on this component html {{category}} returns only the first param
In the second component html file when i {{category}}it onl displays the value of the first routing that is
在第二个组件 html 文件中，当我{{category}}只显示第一个路由的值时
navigate 1 param is checklist display is checklist
navigate 2 param is newcheck display is checklist
What could be wrong since the console.log()prints the correct value but {{category}}only prints the first value
由于console.log()打印了正确的值但{{category}}只打印了第一个值，所以可能有什么问题
In the second component ive aso tried
在第二部分我尝试过
ngOnInit() {
this.onGetItems(+this.activeRoute.snapshot.params['category']);
}
onGetItems(category){
return this._checklistitemsService.getAllItems(category)
.subscribe(
res=>{
this.checklistitems = res
}
)
The onGetItems method is called only once
onGetItems 方法只调用一次
回答by Aravind
When ever you are passing a route parameter, and raise a service call using that parameter, you should use an Observable<params>to subscribe to the activated route in your constructor as below
当您传递路由参数并使用该参数引发服务调用时，您应该使用 anObservable<params>订阅构造函数中的激活路由，如下所示
category: number = 0;
constructor(private route:ActivatedRoute,
private checklistitemsService: CheckListItemsService) {
this.sub = this.route.params.subscribe(params => {
this.category = + params['category'];
......
});
}
Then your service call should be made in the ngOnInit()
然后你的服务调用应该在 ngOnInit() 中进行
ngOnInit(){
this._checklistitemsService.getAllItems(category)
.subscribe(res => {
this.checklistitems = res
}
}
Mistake:
错误：
If you are retrieving the route params in ngOnInit, your components will be loaded before the route value is fetched, so you will find explicit delay and so your this.checklistitemsremains without value.
如果您在ngOnInit中检索路由参数，您的组件将在获取路由值之前加载，因此您会发现显式延迟，因此您的this.checklistitems仍然没有值。
My solution:
我的解决方案：
By retrieving the route parameters, in the constructor, ngOnInitwill not execute until the route parameter is retrieved and there by making a service call to get this.checklistitems. Now your component loads correctly.
通过检索路由参数，在构造函数中，ngOnInit将不会执行，直到检索到路由参数，然后通过调用服务来获取 this.checklistitems。现在您的组件正确加载。
