Question

<ion-nav>支持按此处文档进行推送– https://ionicframework.com/docs/api/nav

我的currentPage html（current-page.page.html）具有按钮组件-

<ion-button (click)="goToNextPage()">Next Page</ion-button>

我的currentPage脚本文件（current-page.page.ts）具有以下代码-

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';
import { NextPage } from '../next-page/next-page.page';

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

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  goToNextPage () {
    this.navCtrl.push('NextPage');
  }

  ngOnInit() {
  }

}

但是，我看到格式错误为Property 'push' does not exist on type 'NavController'

不确定如何正确使用push方法。任何帮助将不胜感激。

Answer 1

也许您可以使用this.navCtrl.navigateForward('NextPage');？

Answer 2

离子4，使用角度布线，

这可以在页面之间导航

<ion-button color="primary" 
    routerLink="/nextPage" routerDirection="forward">Text Button</ion-button>

Answer 3

因此不再使用与离子3相同容量的ion-nav。

在Ionic 4中使用它的用例是“ ...您可能有一个模态的情况，需要它自己的子导航，但不使其绑定到应用程序URL”。

您的使用方式是：

将其添加到您的模板中：

...
<ion-nav #ionNav></ion-nav> 
...

使用ViewChild访问ts文件中的它及其方法：

import { Component, ViewChild } from '@angular/core';
import { IonNav } from '@ionic/angular';
...
export class YourPage {

  @ViewChild('ionNav') ionNav:IonNav;
  ...

  ngAfterViewInit() {
    ... // after this hook and onwards you can call:
    this.ionNav.push("someComponent");
  }
}

Answer 4

在Ionic4中，您可以使用离子NavController或Angular路由器。如果要使用离子型NavController。你可以这样写

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

export class TrainerMessagesPage implements OnInit, OnDestroy {
  public _conversations: Conversation[] = [];
  public conversations: Conversation[] = [];
  private _amr: Subscription;
  public unreadOnly = false;

  constructor(
    private navCtrl: NavController,  ) {
  }

  public goToPage() {
    this.navCtrl.navigateForward(YOUR-Page-URL);
  }

}

ion-nav推送方法不适用于Ionic 4

4 个答案: