Question

Ionic 2：运行时错误未捕获（承诺中）：TypeError：无法读取未定义的属性“nav”

2017-08-31

674

javascript angular typescript ionic2 ionic3

我只是不明白这个错误，为什么它无法读取属性“nav”。我很困惑。希望有人能帮助我并向我解释这个错误，这里是错误：

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { NativeStorage } from '@ionic-native/native-storage';
import { GooglePlus } from '@ionic-native/google-plus';

import { AccountPage } from '../pages/account/account';
import { LoginPage } from '../pages/login/login';

import { TabsPage } from '../pages/tabs/tabs';

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

  rootPage:any = TabsPage;

  constructor( public nativeStorage: NativeStorage, public googlePlus: GooglePlus, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {

      platform.ready().then(() => {

      let env = this;

      this.googlePlus.trySilentLogin({
        'scopes': '', // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
        'webClientId': 'webClientId.apps.googleusercontent.com', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
        'offline': true
      })
      .then(function(data) {
        this.nav.push(AccountPage);
        this.splashScreen.hide();
      }, function (error){
        this.nav.push(LoginPage);
        this.splashScreen.hide();
      });

      statusBar.styleDefault();
    });
  }
}

这似乎是什么问题？

Answer 1

问题在于您使用的是标准函数，因此 this 关键字会被覆盖，并引用该函数而不是组件。为了避免此问题，您需要使用 箭头函数 ，如下所示：

// ...

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

  rootPage:any = TabsPage;

  constructor(public nativeStorage: NativeStorage, 
                public googlePlus: GooglePlus, 
                public platform: Platform, 
                public statusBar: StatusBar, 
                public splashScreen: SplashScreen) {

    platform.ready().then(() => {

        let env = this;

        this.googlePlus.trySilentLogin({
            'scopes': '', // optional, space-separated list of scopes, If not included or empty, defaults to `profile` and `email`.
            'webClientId': 'webClientId.apps.googleusercontent.com', // optional clientId of your Web application from Credentials settings of your project - On Android, this MUST be included to get an idToken. On iOS, it is not required.
            'offline': true
        })
        .then(
            data => {   // <---------------- Here!
                this.nav.push(AccountPage);
                this.splashScreen.hide();
            }, 
            error => {  // <---------------- Here!
                this.nav.push(LoginPage);
                this.splashScreen.hide();
            });

        statusBar.styleDefault();
    });
  }
}