32

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

构造函数

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

方法

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

错误

4

9 回答 9

52

现在，要完成最后一步并在我们的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/

于 2018-10-24T07:33:32.217 回答
9

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

结构是这样的。

     V3                 V4
/src/pages     ->   /src/app/pages
/src/models    ->   /src/app/models
/src/providers ->   /src/app/providers
  • 如果您有 pages 目录，则可以使用 pages。

  • 如果你想传递它，你可以使用参数。

    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')导入来获取 locsIdprivate route: ActivatedRoute

例子：

export class ListPage implements OnInit {

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

  ngOnInit() {
  }

}
于 2018-11-06T12:57:14.220 回答
5 
import { Component } from '@angular/core';
import { Router } from '@angular/router';

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

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

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

于 2019-01-23T00:43:36.730 回答
4

尝试（在离子 4中）

import { NavController } from '@ionic/angular';

而不是（在离子 3中）

import { NavController } from 'ionic-angular'
于 2019-04-17T11:26:17.500 回答
2

首先导入 navcontroller 导入 { NavController, AlertController } from '@ionic/angular'; 现在继续前进也不支持离子3中最好的 this.nav.navigateForward（'/ChatPage'）在离子4中支持，但我的建议应该使用角度路由

于 2019-02-02T16:29:55.633 回答
1

IONIC 4 - Angular（离子启动 appName --type=angular）

物理后退按钮和后退按钮菜单

在目标页面（第二页）中，执行：

第二页 TS

    import { Component, OnInit } from '@angular/core';
    import { Router } from '@angular/router';
    import { Subscription } from 'rxjs';
    import { Platform } from '@ionic/angular';

    @Component({
      selector: 'app-second',
      templateUrl: './second.page.html',
      styleUrls: ['./second.page.scss'],
    })
    export class SecondPage implements OnInit, OnDestroy {

        inscBackAction: Subscription;
        element: HTMLElement;

        constructor(
          private router: Router, 
          public platform: Platform) {
        }

        ngOnInit() {    
          this.inscBackAction = this.platform.backButton.subscribe(() => {
            // Check this log in chrome: "chrome://inspect/#devices"
            console.log('Physical Back Button');                

            this.element = document.getElementById('backButton') as HTMLElement;
            this.element.click();
            // OR
            // this.router.navigate(['/anyPage']);

          }, error => {
            console.log('\n\nERROR:\n' + error.message + '\n\n');
          });
        }

        ngOnDestroy() {
          this.inscBackButton.unsubscribe();
        }
    }

第二页 HTML

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
      <!-- Does not work with #backButton -->
      <ion-back-button id="backButton" defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>
      Second
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding></ion-content>

_

PS：

HTML 中的菜单链接可能需要：

[routerDirection] = "'forward'"

就像在项目侧边菜单上的“app.component.html”中一样

<ion-item [routerDirection]="'forward'" [routerLink]="[p.url]">

查看更多：https ://beta.ionicframework.com/docs/api/buttons/

于 2018-08-22T15:34:47.640 回答
1 
this.navCtrl.push(list);

它在 Ionic 4 中不起作用。Ionic 4 基于 Angular Routing。因此，只需使用以下代码，并为此编写一条路线。

this.navCtrl.goForward('/list');

对于导航栏中的后退按钮

将以下代码粘贴<ion-toolbar> </ion-toolbar>到第二页的后退按钮中。

<ion-buttons slot="start">
      <ion-back-button  defaultHref="home"></ion-back-button>
    </ion-buttons>
于 2018-08-13T19:00:39.987 回答
1

你可以通过使用“import { navController } from 'ionic-angular'”来解决这个问题，但这会给你一个 Rxjs 错误。所以你可能想这样做...

在您的 app-routing.module.ts 中，确保您的页面及其模块在路径和 loadChildren 中正确指定。这是我的

const routes: Routes = [ { path: '', redirectTo: 'login', pathMatch: 'full' },

{ path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
{ path: 'login', loadChildren: './login/login.module#LoginPageModule' },
{ path: 'register', loadChildren: './register/register.module#RegisterPageModule' },
];

在我的 login.page.html 中，我使用它导航到 registerPage

<ion-button size="large" routerLink="/register" routerDirection="forward" expand="block" #btnregister fill="clear" color="primary">Register</ion-button>
于 2019-04-10T14:29:35.640 回答
-1 
 this.deeplink.route({
          '/registration/:userid': RegistrationPage,
          '/registration': RegistrationPage,
      }).subscribe((match) => {  
        this.router.navigateByUrl(match.$link.path, match.$args)  
        console.log("Deeplink =>", match);

        }, err => {
          console.log("Deeplink Error=>", err)
          alert("Deeplink Error=>" + err)
        })
    })
于 2019-04-16T07:21:28.210 回答