NavController 在 Ionic 4 中不起作用 [英] NavController doesn't work in Ionic 4

问题描述

我在构造函数中注入了 NavController，因为我想推送一个页面.但是，下面的代码在 Ionic 4 中不起作用.在 Ionic 3 中完全没问题.

<块引用>

构造函数

constructor(public menuCtrl: MenuController, public navCtrl: NavController) {this.menuCtrl.enable(true);}

<块引用>

方法

goToSecondPage(){this.navCtrl.push(list);}

解决方案

现在，要完成最后一步并在我们的 app-routing.module.ts 文件中实现这些路由，它们看起来像这个:

const 路由:路由 = [{ path: '', redirectTo: '/home', pathMatch: 'full' },{ path: 'home', loadChildren: './pages/home/home.module#HomeModule' },{ path: 'products', loadChildren: './pages/products/products.module#ProductsModule'},{ path: 'products/:id', loadChildren: './pages/product-detail/product-detail.module#ProductDetailModule' },{ path: 'products/categories', loadChildren: './pages/product-categories/product-categories.{ path: 'support', loadChildren: './pages/support/support.module#SupportModule' }];

html页面中的setRoot

或在课堂上

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

推送

或

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

流行

或

您也可以以编程方式向后导航:

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

p/s:https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

I'm injecting NavController in my constructor as I want to push a page. But, below code doesn't work in Ionic 4. It was totally okay in Ionic 3.

Constructor

constructor(public menuCtrl: MenuController, public navCtrl: NavController) {
    this.menuCtrl.enable(true);
   }

Method

goToSecondPage()
  {
    this.navCtrl.push(list);
  }

解决方案

Now, to complete the final step and implement those routes in our app-routing.module.ts file, they would look like this:

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

setRoot in html page

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

or in class

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

Push

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

or

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

Pop

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

or

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

you can also navigate backwards programatically:

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

p/s: https://www.joshmorony.com/converting-ionic-3-push-pop-navigation-to-angular-routing-in-ionic-4/

这篇关于NavController 在 Ionic 4 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！