Ionic2 使用 AngularFire 和 Firebase 时出错:未捕获(在 promisse):这是空的

Question

我目前正在学习Ionic2和Angular，我正在尝试使用Firebase作为应用程序的数据库。我要做的第一件事是使用AngularFire使用Firebase电子邮件身份验证登录。代码如下：

登录.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Home } from '../../home/home';
import { SignUp } from '../signup/signup'
import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2'
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class Login {
  constructor(public navCtrl: NavController, public af: AngularFire) {
  }
  public loginWithEmail(username: string, password: string) {
    this.af.auth.login({
      email: username,
      password: password,
    },
    {
      provider: AuthProviders.Password,
      method: AuthMethods.Password,
    }).then(function() {
      this.navCtrl.setRoot(Home);
    })
  }
}

登录.html

...
    <ion-list>
        <ion-item>
            <ion-label floating>Email</ion-label>
            <ion-input type="text" [(ngModel)]="userName"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label floating>Senha</ion-label>
            <ion-input type="password" [(ngModel)]="password"></ion-input>
        </ion-item>
        <ion-item>
            <button ion-button block (click)="loginWithEmail(userName, password)">Login</button>
        </ion-item>
    </ion-list>
...

但是，当我单击按钮并调用loginWithEmail()方法时，我收到以下错误：

Uncaught (in promise): TypeError: this is null
Login.prototype.loginWithEmail/<@http://localhost:8100/build/main.js:83566:13
O</g</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:9653
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke@http://localhost:8100/build/main.js:37511:28
O</g</t.prototype.invoke@http://localhost:8100/build/polyfills.js:3:9591
O</d</e.prototype.run@http://localhost:8100/build/polyfills.js:3:7000
h/<@http://localhost:8100/build/polyfills.js:3:4659
O</g</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:10273
NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:8100/build/main.js:37502:28
O</g</t.prototype.invokeTask@http://localhost:8100/build/polyfills.js:3:10201
O</d</e.prototype.runTask@http://localhost:8100/build/polyfills.js:3:7618
i@http://localhost:8100/build/polyfills.js:3:3700

我做错了什么？

Answer 1

但我仍然不知道为什么它以这种方式工作而不是在另一个中...... 有人可以解释我吗？

答案是因为箭头函数。当在像function(){...}这样的函数中使用this关键字时，this关键字引用函数本身(并且navCtrl未在该函数中定义(。

箭头函数最重要的方面之一是

箭头函数表达式的语法比函数短 表达式并且不绑定自己的 this、参数、super，或 新目标。

因此，当在 (( => {...} 中使用 this 关键字时，它仍将引用组件实例(定义了 navCtrl 属性(，因此一切都按预期工作。

Answer 2

好吧，我刚刚找到了一种让它工作的方法： 我刚刚更改了：

(在登录.ts上(

这：

.then(function() {
  this.navCtrl.setRoot(Home);
})

对此：

.then(() => this.navCtrl.setRoot(Home))

但我仍然不知道为什么它以这种方式工作而不是在另一个中......有人可以解释我吗？