0

I am trying to make ionic 4 routing work , This is my home component:

<ion-header>
  <ion-toolbar color="primary" class="animated fadeIn">
    <ion-buttons slot="start">
      <ion-menu-button color="secondary"></ion-menu-button>
      <ion-back-button>Back</ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding class="animated fadeIn login auth-page">
  <ion-router-outlet main></ion-router-outlet>
</ion-content>

Those are navbars html file:

<ion-menu-toggle auto-hide="false" *ngFor="let p of driverNavBarComponents">
    <ion-item [routerDirection]="p.direction" [routerLink]="[p.url]" color="primary">
      <ion-icon slot="start" [name]="p.icon"></ion-icon>
      <ion-label>
        {{p.title}}
      </ion-label>
    </ion-item>
</ion-menu-toggle>

and this is the driverNavBarComponent inside ts file:

public driverNavBarComponents = [
    {
      title: 'Home',
      url: '/driver/cabinet',
      icon:'home',
      direction:'root',
    },
    {
      title: 'Profile',
      url: '/driver/cabinet/profile',
      icon:'contact',
      direction:'forward',
    }
  ];

When I go from /driver/cabinet to /driver/cabinet/profile no back button is shown. Also when I return to home from navbar, route changes in url, but I still see profile page. so what am I doing wrong?

That's how my router module looks like:

RouterModule.forChild([
      { 
        path: 'driver/cabinet', 
        component: DriverHomeComponent ,
        children:[
          {
            path: 'profile',
            component: DriverProfileComponent
          },
          {
            path: 'tracking',
            component: DriverTrackingComponent
          }
        ]
      }
    ]),
O. Shekriladze
  • 1,346
  • 1
  • 19
  • 36
  • You have to add back button to DriverProfileComponent header and DriverTrackingCompnent header, I'm guessing. – Anjil Dhamala Feb 28 '19 at 20:28
  • I tried it but doesn't show up – O. Shekriladze Feb 28 '19 at 20:36
  • it might be too long for a comment but it's really more of a suggestion than an answer so i'm gonna comment anyway. Change your route this way. path: 'driver' children: [ { path: 'cabinet', component: DriverHomeComponent }, { path: 'profile', component: DriverProfileComponent }, { path: 'tracking', component: DriverTrackingComponent } ] – Anjil Dhamala Feb 28 '19 at 20:38
  • It's not working :/ – O. Shekriladze Feb 28 '19 at 20:58

1 Answers1

0

ion-router-outlet does not belong in the ion-content.

It's a top level component that is not supposed to be a child element.

Please see the starter projects.

mhartington
  • 6,905
  • 4
  • 40
  • 75
  • so I should do something like that without `ion-router-outlet` ? : ` RouterModule.forChild([ { path: 'driver/cabinet', component: DriverHomeComponent}, { path: 'driver/cabinet/profile', component: DriverProfileComponent}, { path: 'driver/cabinet/tracking', component: DriverTrackingComponent}, ]),` – O. Shekriladze Feb 28 '19 at 22:35
  • I just want to have a parent `cabinet` route where I will load the most data from server, and then I want to have child routes like `cabinet/profile/orders`. so should I write routes directly like I showed you above? – O. Shekriladze Feb 28 '19 at 22:50