Question

我尝试将导航添加到Ionic 2应用程序中的app.component.ts文件中。由于某种原因，我收到了nav未定义的错误。

添加NavController也不是选项，因为它会说NavController没有提供商。

我收到的错误是：

Native：尝试调用Facebook.browserInit，但Cordova不可用。确保包含cordova.js或在设备/模拟器main.js（416,9）中运行   Angular正在开发模式下运行。调用enableProdMode（）以启用生产模式。 main.js（3511,5）
  Native：尝试调用NativeStorage.getItem，但Cordova不可用。确保包含cordova.js或在设备/模拟器main.js（416,9）中运行   Native：尝试调用StatusBar.styleDefault，但Cordova不可用。确保包含cordova.js或在设备/模拟器main.js（416,9）中运行   例外：未被捕（承诺）：
  TypeError：无法获取属性＆＃39; nav＆＃39;未定义或空引用TypeError：无法获取属性＆＃39; nav＆＃39;未定义或空引用的       在匿名函数（http：// localhost：8100 / build / main.js：125439：17）
      at t.prototype.invoke（http：// localhost：8100 / build / polyfills.js：3：9569）
     at onInvoke（http：// localhost：8100 / build / main.js：38701：21）
      at t.prototype.invoke（http：// localhost：8100 / build / polyfills.js：3：9569）
     在e.prototype.run（http：// localhost：8100 / build / polyfills.js：3：6993）
     在匿名函数（http：// localhost：8100 / build / polyfills.js：3：4652）
      at t.prototype.invokeTask（http：// localhost：8100 / build / polyfills.js：3：10175）
      at onInvokeTask（http：// localhost：8100 / build / main.js：38692：21）
      at t.prototype.invokeTask（http：// localhost：8100 / build / polyfills.js：3：10175）
      在e.prototype.runTask（http：// localhost：8100 / build / polyfills.js：3：7611）
    at i（http：// localhost：8100 / build / polyfills.js：3：3700）
      at invoke（http：// localhost：8100 / build / polyfills.js：3：11431）
   main.js（78327,9）
  原始STACKTRACE：main.js（78332,13）
  错误：未捕获（承诺）：
  TypeError：无法获取属性＆＃39; nav＆＃39;未定义或空引用的   TypeError：无法获取属性＆＃39; nav＆＃39;匿名函数中的未定义或空引用（http：// localhost：8100 / build / main.js：125439：17）
    at t.prototype.invoke（http：// localhost：8100 / build / polyfills.js：3：9569）
      at onInvoke（http：// localhost：8100 / build / main.js：38701：21）
      at t.prototype.invoke（http：// localhost：8100 / build / polyfills.js：3：9569）
     在e.prototype.run（http：// localhost：8100 / build / polyfills.js：3：6993）
     在匿名函数（http：// localhost：8100 / build / polyfills.js：3：4652）
      at t.prototype.invokeTask（http：// localhost：8100 / build / polyfills.js：3：10175）
      at onInvokeTask（http：// localhost：8100 / build / main.js：38692：21）
      at t.prototype.invokeTask（http：// localhost：8100 / build / polyfills.js：3：10175）
      在e.prototype.runTask（http：// localhost：8100 / build / polyfills.js：3：7611）
    at i（http：// localhost：8100 / build / polyfills.js：3：3700）
      at invoke（http：// localhost：8100 / build / polyfills.js：3：11431）
      at v（http：// localhost：8100 / build / polyfills.js：3：4856）
      at s（http：// localhost：8100 / build / polyfills.js：3：4283）
      在匿名函数（http：// localhost：8100 / build / polyfills.js：3：4690）
      at t.prototype.invokeTask（http：// localhost：8100 / build / polyfills.js：3：10175）
      at onInvokeTask（http：// localhost：8100 / build / main.js：38692：21）
      at t.prototype.invokeTask（http：// localhost：8100 / build / polyfills.js：3：10175）
      在e.prototype.runTask（http：// localhost：8100 / build / polyfills.js：3：7611）
    at i（http：// localhost：8100 / build / polyfills.js：3：3700）
      at invoke（http：// localhost：8100 / build / polyfills.js：3：11431）
   main.js（78333,13）

我使用的代码：

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar, Splashscreen, NativeStorage, Facebook } from 'ionic-native';

import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage = LoginPage;

  constructor(private platform: Platform) {
    this.InitliazeApp();
  }

  InitliazeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

      NativeStorage.getItem('user')
        .then(function (data) {
          this.nav.setRoot(HomePage);
          Splashscreen.hide();
        }, function (error) {
          this.nav.setRoot(LoginPage);
          Splashscreen.hide();
        });

      StatusBar.styleDefault();
    });
  }
}

Answer 1

在Ionic2中，您通常会通过将NavController添加到构造函数来添加导航。然后使用依赖注入注入它。

constructor(public navCtrl: NavController)

Answer 2

在app.component.ts中导入以下内容

导入{Nav，NavController，Platform}来自＆＃39; ionic-angular＆＃39;;

在构造函数

中添加以下代码

构造函数（public navCtrl：NavController）

Ionic 2 - Nav undefined

2 个答案: