Ionic 4 和标签，后退按钮从不显示

Question

我是 angular 路由方法的新手，如果不包含不理想的默认路由，我将无法显示后退按钮。我有一个链接到 ion-tabs 页面的简单菜单，但是当我调用 ionRouterOutlet.canGoBack() 时，没有选项卡 header 显示后退按钮和路由器 returns false。

App.module

@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 {}

AppRoutingModule

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 { }

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

ManagerDashboardRoutingModule

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 {}

这是一个 tabs 页面，当我导航到 /manager-dashboard 时，会显示 ConsultationPage，但是关于之前路线的所有信息都是未知的，我无法返回：

咨询页面

export class ConsultationsPage implements OnInit {

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

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

我可以做些什么来允许返回吗？

Answer 1

解决此问题的一个简单方法是不使用 ion-back-button，而是在 ion-buttons 中使用 ion-button，如下所示：

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

您可以执行任何操作，也可以在 previous() 方法中使用 @angular/router 进行导航，或者直接使用 href 属性进行导航。

Ionic 4 和标签，后退按钮从不显示

Ionic 4 and tabs, back button never shows

ionic-framework

angular

ionic4