Angular2 - 例外：无法读取未定义的属性 'af'

Question

我正在构建一个 Angular2 应用程序，使用 Auth0 进行身份验证，并使用 AngularFire 来构建我的数据库。在我的构造函数中，我传递了我的 AngularFire af 实例，但我无法在我的回调事件中访问它。还有其他方法可以访问我的 AngularFire 实例吗？

// app/auth.service.ts

import { Injectable } from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';
import { AngularFire, AuthMethods, AuthProviders } from 'angularfire2';


// Avoid name not found warnings
declare var Auth0Lock: any;
declare var Auth0: any;

@Injectable()
export class Auth {
 // Configure Auth0
  lock = new Auth0Lock('AUTH0_CLIENT_ID', 'AUTH0_DOMAIN', {});


  constructor(private af: AngularFire) {
    // Add callback for lock `authenticated` event

    this.lock.on("authenticated", (authResult) => {
      this.lock.getProfile(authResult.idToken, function(error:any, profile:any){
        if(error){
          throw new Error(error);
        }

        localStorage.setItem('id_token', authResult.idToken);
        localStorage.setItem('profile', JSON.stringify(profile));

        var options = {
        id_token : authResult.idToken,
        api : 'firebase',
        scope : 'openid name email displayName',
        target: 'AUTH0_CLIENT_ID'
        };


        var auth0 = new Auth0({domain:'AUTH0_DOMAIN', clientID:'AUTH0_CLIENT_ID' });
        auth0.getDelegationToken(options, function(err, result){

          if(!err){


            this.af.auth.login(result.id_token, {
              provider: AuthProviders.Custom,
              method: AuthMethods.CustomToken
            });
            console.log(result);
          }
        });
      });
    });
  }
}

Answer 1

那是因为您的 this 内部回调函数指向该函数。您有三个选择：

保存 class：let that = this 并在回调中使用 that.af。
使用 lambda，因为它不会改变 this：(error, profile) => {...}
您可以调用.bindTo(this)函数并将其绑定到class

此外，我推荐 lambda 方法。

Angular2 - 例外：无法读取未定义的 属性 'af'

Angular2 - EXCEPTION: Cannot read property 'af' of undefined

firebase

auth0

angularfire2

angular

Angular2 - 例外：无法读取未定义的属性 'af'