Question

我是角度布线方法的新手，没有包含不理想的默认布线，无法显示我的后退按钮。我有一个链接到ion-tabs页面的简单菜单，但是没有标签页头显示后退按钮，当我呼叫false时，路由器会返回ionRouterOutlet.canGoBack()。

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-buttons slot="start">
  <ion-button (click)="previous()">
    <ion-icon name="arrow-back"></ion-icon>
  </ion-button>
</ion-buttons>

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

离子4和标签页，后退按钮永不显示

1 个答案: