Ionic 4 routing to subpages

Ionic Framework ionic-v3
1

I’m trying to understand the routing and I stumble upon the following situation because I’m still unsure what the most effective way is. I’m new to Inic 4 and Angular 8.

On the home page there is a list of links that navigate to the detail page. An ID is passed in the process. Within the detail page there are more detail subpages where the ID is passed to these pages. Further information is then loaded there.

My structure is:

app
 pages
   home
   detail
     detail-infos

app-routing.module.ts

const routes: Routes = [
    {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule)
    },
    {
        path: 'detail/:id',
        resolve: {
            restaurant: DetailPageResolver
        },
        loadChildren: () => import('./pages/detail/detail.module').then(m => m.DetailPageModule)
    }
];

home.page.ts

openDetail(id) {
  this.detailPageService.setData(id, this.restaurants[id]);
  this.router.navigate(['/detail/' + id]);
}

home.page.html

<ion-virtual-scroll [items]="restaurants" approxItemHeight="315px">
  <ion-card button *virtualItem="let item; index as i;" (click)="openDetail(item.clientId)">
  ...
  </ion-card>
</ion-virtual-scroll>

detail-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: DetailPage,
        children: [
            {
                path: ':id',
                component: DetailInfosPage
            }
        ]
    }
];

detail.page.ts

ngOnInit() {
  if (this.route.snapshot.data.restaurant) {
    this.data = this.route.snapshot.data.restaurant;
  }
}

detail.page.html

<ion-item button lines="none"> <-- what to use here? routerLink or (click) to rout to subpage
...
</ion-item>

Anyone got a “best practice” tip for me