angular - Parâmetro ActivatedRoute do Angular2 está indefinido

Estou tentando exibir o valor do parâmetro de rota ativa na tela, mas está falhando

No primeiro componente eu tenho

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

Agora, sobre o segundo componente para onde estou navegando, eu tenho

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

No segundo arquivo HTML do componente, quando eu {{category}} ele só exibe o valor da primeira rota que é

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

O que pode estar errado, já que o console.log() imprime o valor correto, mas {{category}} só imprime o primeiro valor

No segundo componente, também tentei

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

 }

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

O método onGetItems é chamado apenas uma vez

Resposta #1

Sempre que você estiver passando um parâmetro de rota e fizer uma chamada de serviço usando esse parâmetro, você deve usar um Observable<params> para se inscrever na rota ativada no seu construtor conforme abaixo

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

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

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

    });
}

Então, sua chamada de serviço deve ser feita no ngOnInit()

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

Erro:

Se você estiver recuperando os parâmetros de rota em ngOnInit, seus componentes serão carregados antes que o valor da rota seja buscado, então você encontrará um atraso explícito e, portanto, seu this.checklistitems permanece sem valor.

Minha solução:

Ao recuperar os parâmetros da rota, no construtor, o ngOnInit não será executado até que o parâmetro da rota seja recuperado e, assim, fazendo uma chamada de serviço para obter este.checklistitems. Agora seu componente carrega corretamente.