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); }
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With