Angular2 ActivatedRoute参数未定义

本文介绍了Angular2 ActivatedRoute参数未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我试图在屏幕上显示激活路由参数的值，但失败

Am trying to display the value of activate route param in the screen but fails

在第一部分中，我拥有

<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

在第二个html组件文件中，当我{{category}}时，它仅显示第一个路由的值是

In the second component html file when i {{category}} it onl displays the value of the first routing that is

navigate 1 param is checklist display is checklist navigate 2 param is newcheck display is checklist

由于console.log()打印正确的值而{{category}}仅打印第一个值，所以可能出了问题

What could be wrong since the console.log() prints the correct value but {{category}} only prints the first value

在第二部分中，ive aso尝试过

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 } )

onGetItems方法仅被调用一次

The onGetItems method is called only once

推荐答案

无论何时传递路由参数，并使用该参数引发服务调用，都应使用 Observable<params> 在您的构造函数中订阅激活的路由，如下所示:

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

category: number = 0; constructor(private route:ActivatedRoute, private checklistitemsService: CheckListItemsService) { this.sub = this.route.params.subscribe(params => { this.category = + params['category']; ...... }); }

然后应该在ngOnInit()中进行服务调用

Then your service call should be made in the ngOnInit()

ngOnInit(){ this._checklistitemsService.getAllItems(category) .subscribe(res => { this.checklistitems = res } }

错误:

如果要在 ngOnInit 中检索路由参数，则会在获取路由值之前加载组件，因此会发现明显的延迟，因此您的 this.checklistitems >仍然没有价值.

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.checklistitems remains without value.

我的解决方案:

通过检索路由参数，在构造函数中， ngOnInit 将不执行，直到检索到路由参数并在那里进行服务调用以获取此.checklistitems.现在，您的组件可以正确加载了.

By retrieving the route parameters, in the constructor, ngOnInit will not execute until the route parameter is retrieved and there by making a service call to get this.checklistitems. Now your component loads correctly.