Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

NavController doesn't work 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);   } 

Error

like image 403
Abhijit Mondal Abhi Avatar asked Aug 13 '18 17:08

Abhijit Mondal Abhi


People also ask

Is NavController deprecated?

NavController as this is deprecated in IONIC 4. Structure is like this. You can use pages if you have pages directory. You can use parameters if you want to pass it.

How do I redirect to another page in ionic 4?

to​ A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined ion-route-redirect rule matches, the router will redirect to the path specified in this property.


1 Answers

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/

like image 122
Sáng Trần Công Avatar answered Oct 02 '22 20:10

Sáng Trần Công