Angular2 / Ionic2 在页面之间导航答案

【问题标题】：Angular2 / Ionic2 navigating between pagesAngular2 / Ionic2 在页面之间导航
【发布时间】：2016-05-10 16:36:14
【问题描述】：

我在使用 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);
  }
}

我收到一条错误消息：

“推”不是函数

如果我尝试不同的技巧并尝试将主页设置为根，如下所示：

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”未定义

请有人给我一些指示吗？提前致谢

【问题讨论】：

标签： angular ionic2

【解决方案1】：

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

我看到了两种解决方法...

选项 1

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

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

  constructor(public nav) { }

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

选项 2

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

export class LoginPage {
  customVariable: string;

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

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

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

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

【讨论】：

非常感谢 Will，这是一个很大的帮助，非常感谢。