时间戳

首页 > 解决方案 > ion-nav push 在 Ionic 4 中无法正常工作

angular - ion-nav push 在 Ionic 4 中无法正常工作

问题描述

我试图将登录页面登录按钮添加到 nav-push ，但它不起作用，任何人都知道如何在 Ionic-4中正确执行此操作，

登录页面 

  <ion-button icon-left size="medium" expand="full" shape="round" color="secondary" (click)="goToHome()" tappable>

        Sign in
      </ion-button>

.ts

import { NavController, MenuController, ToastController, AlertController, LoadingController } from '@ionic/angular';

constructor(
      public navCtrl: NavController,
      public menuCtrl: MenuController,

      public alertCtrl: AlertController,
      public loadingCtrl: LoadingController,

  ) { }
goToHome() {
    this.navCtrl.navigateRoot('/tab1');
  }

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'tabs/tab1', loadChildren: './tab1/tab1.module#TabsPageModule' },
  { path: 'register', loadChildren: './pages/register/register.module#RegisterPageModule' },




];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

标签： angularionic-frameworkionic4

解决方案

Ionic 4 路由改变了 this.navCtrl.navigateRoot('/tab1'); 不再使用

现在，要完成最后一步并在我们的app-routing.module.ts文件中实现这些路由，它们将如下所示：

    const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', loadChildren: '.../tab1/tab1.module#Tab1PageModule' },
{ path: 'products', loadChildren: './pages/products/products.module#ProductsModule'},
{ path: 'products/:id', loadChildren: '.../tab1/tab1.module#Tab1PageModule' },
{ path: 'products/categories', loadChildren: './pages/product-categories/product-categories.
{ path: 'support', loadChildren: '../tab1/tab1.module#Tab1PageModule' }
];

html页面中的setRoot

<ion-button href="/support" routerDirection="root">

或在课堂上

this.navCtrl.navigateRoot('/support');

推

<ion-button href="/products/12" routerDirection="forward">

或者

this.navCtrl.navigateForward('/products/12');

流行音乐

<ion-button href="/products" routerDirection="backward">

或者

<ion-back-button defaultHref="/products"></ion-back-button>

您还可以以编程方式向后导航：

this.navCtrl.navigateBack('/products');

推荐阅读