Angular2 / Ionic2 在页面之间导航

Question

我在使用 Angular2/Ionic2 的页面之间导航时遇到了一些实际问题

如果我尝试使用以下代码推送到新页面：

import {Page, NavController} from 'ionic-angular';
import {HomePage} from '../home/home';

@Page({
  templateUrl: 'build/pages/login/login.html'
})

export class LoginPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
  }

  goHome() {
    this.nav.push(HomePage);
  }
}

我收到一条错误消息：

"push" is not a function

如果我尝试不同的策略并尝试将主页设置为根目录，如下所示：

import {IonicApp, Page, NavController} from 'ionic-angular';
import {HomePage} from '../home/home';

@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  static get parameters() {
    return [[IonicApp], [NavController]];
  }

  constructor(app, nav) {
    this.app = app;
    this.nav = nav;
  }

  goHome() {
    let nav = this.app.getComponent('nav');
    nav.setRoot(HomePage);
  }
}

我收到一条错误消息：

"app" is not defined

有人能给我一些指点吗？提前致谢

Answer 1

我认为出了问题的是你没有将 app 和 nav 声明为 class 中的变量，所以当你在构造函数中分配它们时 this.app 和 this.nav 实际上并不存在给你未定义的错误。

我看到有两种方法可以解决这个问题...

选项 1

在构造函数中将 app 和 nav 参数定义为 public 或 private，这将自动为您在 class 中创建变量（这是处理导入的 classes 时的常用选项）。一个例子是：

export class LoginPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(public nav) { }

  goHome() {
    this.nav.push(HomePage);
  }
}

选项 2

在构造方法之前的class中定义变量（这对于您自己的自定义变量更常见，尤其是使用模型class）。这方面的一个例子是：

export class LoginPage {
  customVariable: string;

  static get parameters() {
    return [[NavController]];
  }

  constructor(public nav) {
    this.customVariable = "test string";
  }

  goHome() {
    this.nav.push(HomePage);
  }
}

希望这对您有所帮助，让您了解不同的用途。

Angular2 / Ionic2 在页面之间导航

Angular2 / Ionic2 navigating between pages

ionic2

angular