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

【问题标题】：Ionic 4 and tabs, back button never showsIonic 4 和标签，后退按钮从不显示
【发布时间】：2019-04-30 12:24:29
【问题描述】：

我是角度路由方法的新手，如果不包含不理想的默认路由，我无法显示我的后退按钮。我有一个链接到ion-tabs 页面的简单菜单，但没有选项卡标题显示后退按钮，当我调用ionRouterOutlet.canGoBack() 时路由器返回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
  }    
}

有什么办法可以让我回去吗？

【问题讨论】：

我发现您可以使用this.ionRouterOutlet.parentOutlet.pop() 来获取标签容器的返回功能，因为标签页本身总是为您找到的canGoBack() 返回false。

标签： angular ionic-framework ionic4

【解决方案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 属性进行导航。

【讨论】：