NavController在Ionic 4中不起作用

Question

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

构造函数

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

方法

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

Answer 1

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

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

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');

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

Answer 2

NavController，因为在IONIC 4中已弃用。

结构就是这样。

     V3                 V4
/src/pages     ->   /src/app/pages
/src/models    ->   /src/app/models
/src/providers ->   /src/app/providers

• 如果有页面目录，则可以使用页面。

• 如果要传递参数，可以使用参数。

  this.router.navigate（'/ pages，{locs：this.locId}]）'）;

示例：带有Pages目录。

this.router.navigate(['/list'], { locs: this.locId }]);

示例：没有Pages目录和参数。

this.router.navigate(['/list']);

该链接对于选项卡很有用。有关更多信息，请通过此链接。[ https://medium.com/modus-create-front-end-development/upgrading-an-ionic-3-application-to-ionic-4-eaf81a53cdea][1]

附加功能：

导航到新页面后，我们可以this.route.snapshot.paramMap.get('locs')通过private route: ActivatedRoute在当前页面构造函数中导入来获取locsId

例：

export class ListPage implements OnInit {

  constructor(private route: ActivatedRoute) {
    console.log("this.route.snapshot.paramMap.get : ", this.route.snapshot.paramMap.get('locs'));
  }

  ngOnInit() {
  }

}

Answer 3

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
 ...
})
export class LoginComponent {
 constructor(private router: Router){}

    navigate(){
       this.router.navigate(['/detail'])
    }
}

欲了解更多信息请点击这里