Data is not passed on to id page

Ionic Framework ionic-v3
1

I want to pass data of items to a details page. The navigation works fine. But if I want to use string interpolation to output the chosen item, there is just nothing (an empty output). I tried playing around with the app-routing.module, but that didn’t work.

Here is my code.

item.html

 <ion-title> {{ item.username }} </ion-title>

item.ts

openRankdet() {
    this.router.navigate(['itemdetail/:id'])
  }

item.model.ts

export class Item {
    constructor(
        public id: string, 
        public username: string, 
        public imageUrl: string,
        public imageUrl2: string,
         ) {

         }
}

item.service

 private _item: Item[] = [ //dummy data
    new Item(
     'r1',
     'Martin',
     'assets/7.jpeg',
     'assets/two.jpeg',
     ),
];
...
 get item() {
    return [...this._item];
  }

  constructor() { }

  getItem(id: string) {
    return {...this._item.find(r => r.id === id)};
  }

itemdetail.ts



item: Item;  //store item data model
constructor() {}

ngOnInit() {
    this.route.paramMap.subscribe(paramMap => {
      if (!paramMap.has('id')) {
        this.router.navigate[('item')];
        return;
      }
      this.item = this.itemservice.getItem(paramMap.get('id'));
    }); 

}

app-routing.module.ts

...
 { path: 'itemdetail/:id', loadChildren: './itemdetail/itemdetail.module#ItemdetailPageModule' },
...