Angular2 ActivatedRoute 参数未定义

Question

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

在我的第一个组件中

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

现在在我导航到的第二个组件上

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}} 时，它只显示第一个路由的值

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

console.log() 打印了正确的值，但 {{category}} 只打印了第一个值，这可能是哪里出了问题

我也试过在第二个组件中

ngOnInit() {
 this.onGetItems(+this.activeRoute.snapshot.params['category']);

 }

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

onGetItems 方法只被调用一次

Answer 1

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

category: number = 0;
constructor(private route:ActivatedRoute, 
            private checklistitemsService: CheckListItemsService) {

    this.sub = this.route.params.subscribe(params => {

            this.category = + params['category'];
              ......

    });
}

那么你的服务调用应该在 ngOnInit() 中进行

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

错误:

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

我的解决方案:

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