Angular Ionic 4和选项卡，后退按钮从不显示

我是角度布线方法的新手，如果不包括不理想的默认布线，就无法显示“后退”按钮。我有一个简单的菜单链接到一个

离子标签

页面，但是没有标签标题显示后退按钮，当我调用

离子路由输出.canGoBack（）时，路由器返回
false

应用程序模块

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    PipesModule,
    MomentModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,

    IonicModule.forRoot({
      mode: 'ios'
    }),
    IonicStorageModule.forRoot(),
    ClientsModule,
    ManagerDashboardPageModule,
    AppRoutingModule,
    HttpClientModule,
    SharedModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export const routes: Routes = [
  {
    path: 'login',
    // component: LoginPage,
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  {
    path: 'users/:id/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  {
    path: 'users/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'edit', loadChildren: './pages/users/edit/edit.module#EditPageModule' },
  { path: 'consultations', loadChildren: './pages/manager-dashboard/consultations/consultations.module#ConsultationsPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      enableTracing: true
    }),
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

const managerRoutes: Routes = [
  {
    path: 'manager-dashboard',
    component: ManagerDashboardPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'consultations',
        component: ConsultationsPage,
      },
      {
        path: 'weigh-ins',
        component: ConsultationsPage
      },
      {
        path: 'finance',
        component: ConsultationsPage
      },
      {
        path: '',
        redirectTo: 'consultations',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(managerRoutes),
    ConsultationsPageModule,
  ],
  exports: [RouterModule]
})

export class ManagerDashboardRoutingModule {}

export class ConsultationsPage implements OnInit {

  constructor( private router: Router,
               private ionRouterOutlet: IonRouterOutlet,
               private global: GlobalsService ) { }

  ngOnInit() {
    console.log(this.ionRouterOutlet.canGoBack()) // prints false
  }    
}

批准模块

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    PipesModule,
    MomentModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,

    IonicModule.forRoot({
      mode: 'ios'
    }),
    IonicStorageModule.forRoot(),
    ClientsModule,
    ManagerDashboardPageModule,
    AppRoutingModule,
    HttpClientModule,
    SharedModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export const routes: Routes = [
  {
    path: 'login',
    // component: LoginPage,
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  {
    path: 'users/:id/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  {
    path: 'users/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'edit', loadChildren: './pages/users/edit/edit.module#EditPageModule' },
  { path: 'consultations', loadChildren: './pages/manager-dashboard/consultations/consultations.module#ConsultationsPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      enableTracing: true
    }),
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

const managerRoutes: Routes = [
  {
    path: 'manager-dashboard',
    component: ManagerDashboardPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'consultations',
        component: ConsultationsPage,
      },
      {
        path: 'weigh-ins',
        component: ConsultationsPage
      },
      {
        path: 'finance',
        component: ConsultationsPage
      },
      {
        path: '',
        redirectTo: 'consultations',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(managerRoutes),
    ConsultationsPageModule,
  ],
  exports: [RouterModule]
})

export class ManagerDashboardRoutingModule {}

export class ConsultationsPage implements OnInit {

  constructor( private router: Router,
               private ionRouterOutlet: IonRouterOutlet,
               private global: GlobalsService ) { }

  ngOnInit() {
    console.log(this.ionRouterOutlet.canGoBack()) // prints false
  }    
}

我已将所有管理器路由分离到一个单独的路由模块中，并将其导入到
ManagerDashboardPageModule
中。这是路线

ManagerDashboardRoutingModule

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    PipesModule,
    MomentModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,

    IonicModule.forRoot({
      mode: 'ios'
    }),
    IonicStorageModule.forRoot(),
    ClientsModule,
    ManagerDashboardPageModule,
    AppRoutingModule,
    HttpClientModule,
    SharedModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export const routes: Routes = [
  {
    path: 'login',
    // component: LoginPage,
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  {
    path: 'users/:id/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  {
    path: 'users/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'edit', loadChildren: './pages/users/edit/edit.module#EditPageModule' },
  { path: 'consultations', loadChildren: './pages/manager-dashboard/consultations/consultations.module#ConsultationsPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      enableTracing: true
    }),
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

const managerRoutes: Routes = [
  {
    path: 'manager-dashboard',
    component: ManagerDashboardPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'consultations',
        component: ConsultationsPage,
      },
      {
        path: 'weigh-ins',
        component: ConsultationsPage
      },
      {
        path: 'finance',
        component: ConsultationsPage
      },
      {
        path: '',
        redirectTo: 'consultations',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(managerRoutes),
    ConsultationsPageModule,
  ],
  exports: [RouterModule]
})

export class ManagerDashboardRoutingModule {}

export class ConsultationsPage implements OnInit {

  constructor( private router: Router,
               private ionRouterOutlet: IonRouterOutlet,
               private global: GlobalsService ) { }

  ngOnInit() {
    console.log(this.ionRouterOutlet.canGoBack()) // prints false
  }    
}

这是一个
选项卡
页面，当我导航到
/manager dashboard
时，会显示
咨询页面
，但有关以前路线的所有信息都未知，我无法返回：

咨询页面

@NgModule({
  declarations: [
    AppComponent,
  ],
  entryComponents: [],
  imports: [
    PipesModule,
    MomentModule,
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,

    IonicModule.forRoot({
      mode: 'ios'
    }),
    IonicStorageModule.forRoot(),
    ClientsModule,
    ManagerDashboardPageModule,
    AppRoutingModule,
    HttpClientModule,
    SharedModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptorService,
      multi: true
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptorService,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export const routes: Routes = [
  {
    path: 'login',
    // component: LoginPage,
    loadChildren: './pages/login/login.module#LoginPageModule'
  },
  {
    path: 'users/:id/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  {
    path: 'users/edit',
    loadChildren: "./pages/users/edit/edit.module#EditPageModule"
  },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'edit', loadChildren: './pages/users/edit/edit.module#EditPageModule' },
  { path: 'consultations', loadChildren: './pages/manager-dashboard/consultations/consultations.module#ConsultationsPageModule' },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      enableTracing: true
    }),
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

const managerRoutes: Routes = [
  {
    path: 'manager-dashboard',
    component: ManagerDashboardPage,
    canActivate: [AuthGuard],
    canActivateChild: [AuthGuard],
    children: [
      {
        path: 'consultations',
        component: ConsultationsPage,
      },
      {
        path: 'weigh-ins',
        component: ConsultationsPage
      },
      {
        path: 'finance',
        component: ConsultationsPage
      },
      {
        path: '',
        redirectTo: 'consultations',
        pathMatch: 'full'
      }
    ]
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(managerRoutes),
    ConsultationsPageModule,
  ],
  exports: [RouterModule]
})

export class ManagerDashboardRoutingModule {}

export class ConsultationsPage implements OnInit {

  constructor( private router: Router,
               private ionRouterOutlet: IonRouterOutlet,
               private global: GlobalsService ) { }

  ngOnInit() {
    console.log(this.ionRouterOutlet.canGoBack()) // prints false
  }    
}

我能做些什么来允许返回吗？
这个问题的一个简单解决方案是不使用离子返回按钮，而是在离子按钮内使用离子按钮，如下所示：

<ion-buttons slot="start">
  <ion-button (click)="previous()">
    <ion-icon name="arrow-back"></ion-icon>
  </ion-button>
</ion-buttons>



您可以执行任何操作，也可以在previous（）方法中使用@angular/router进行导航，或者直接使用href属性进行导航。
此问题的一个简单解决方案是不使用离子返回按钮，而是在离子按钮内使用离子按钮，如下所示：

<ion-buttons slot="start">
  <ion-button (click)="previous()">
    <ion-icon name="arrow-back"></ion-icon>
  </ion-button>
</ion-buttons>



您可以执行任何操作，也可以在previous（）方法中使用@angular/router进行导航，或者直接使用href属性进行导航。
我发现您可以使用
this.ionRouterOutlet.parentOutlet.pop（）
获取选项卡容器的返回功能，因为
canGoBack（）的选项卡页面本身总是返回false
如您所见。我发现您可以使用
this.ionRouterOutlet.parentOutlet.pop（）
获取选项卡容器的返回功能，因为选项卡页面本身总是为
canGoBack（）
返回false。