angular - Angular2 ActivatedRoute-parameter är odefinierad

Försöker visa värdet av aktivera ruttparametern på skärmen men det misslyckas

I den första komponenten har jag

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

Nu på den andra komponenten till där jag navigerar

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

I den andra komponentens html-fil, när jag {{category}}, visas endast värdet av den första routingen, det vill säga

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

Vad kan vara fel eftersom console.log() skriver ut rätt värde men {{category}} bara skriver ut det första värdet

I den andra komponenten har jag också försökt

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

 }

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

Metoden onGetItems anropas bara en gång

Svar #1

När du passerar en ruttparameter och gör ett serviceanrop med den parametern, bör du använda ett Observable<params> för att prenumerera på den aktiverade rutten i din konstruktor enligt nedan

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

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

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

    });
}

Då bör ditt servicemeddelande göras i ngOnInit()

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

Misstag:

Om du hämtar ruttparametrarna i ngOnInit, kommer dina komponenter att laddas innan ruttvärdet hämtas, så du kommer att märka en tydlig försening och därför förblir din this.checklistitems utan värde.

Min lösning:

Genom att hämta ruttparametrarna i konstruktören, kommer ngOnInit inte att köras förrän ruttparametern har hämtats och därigenom görs ett servicelcall för att få detta.checklistitems. Nu laddas din komponent korrekt.