ионно-навигационный толчок не работает правильно в Ionic 4

Question

Я пытался добавить кнопку входа на странице входа в 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');
  }

приложение-routing.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 {}

Answer 1

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' }
];

setRoot на html странице

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

или в классе

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

Нажмите

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

или

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

Pop

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

или

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

Вы также можете перемещаться назад программно:

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