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

现在我的第二个组件是naviagting

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 仍然没有价值。

我的解决方案：

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

Angular2 ActivatedRoute参数未定义

1 个答案: