Question

我在从调用外部js lib / code的函数调用/访问类内函数和服务函数时遇到问题...但是我能够使用＆＃39;这和＆来访问类变量＃39; angular 2 component中的关键字

FB＆lt; - 是用于获取已记录用户的facebook通信值的facebook sdk函数

这是代码

statusChangeCallback(resp: any) {
        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken; // this variable gets the correct value in it

            FB.api('/me?fields=name,email', function (resp: any) {
                this.email = resp.email; // this variable gets the correct value in it

                if (this.email !== '' && this.access_token !== '') {
                    console.log('under if statement');
                    var auth = {};
                    auth['accesstoken'] = this.access_token;
                    auth['emailid'] = this.email;

                    console.log(auth);

                    this.send_registeration(auth); // this function throws ERROR
                    // this.http.fb_register(this.email, this.access_token);
                }
            }, { scope: 'email,public_profile' });
        } else if (resp.status === 'not_authorized') {

        } else {

        }
    }

这里的错误说明显示在chrome

中

zone.js:260 Uncaught TypeError: this.send_registeration is not a function

这里是结帐的完整组件代码

import {Component, OnInit, Output} from '@angular/core';
import {ROUTER_DIRECTIVES, Router} from '@angular/router-deprecated';
import { HttpService } from '../../Service/http.service';

declare const FB: any;

@Component({
    selector: 'facebook-login',
    template: `
    <div>
        <button class="btn btn-facebook" (click)="onFacebookLoginClick()">
            <i class="fa fa-facebook"></i>Sign in with Facebook
        </button>
    </div>
    `,
    providers: [HttpService],
    directives: [ROUTER_DIRECTIVES]
})

export class FacebookLoginComponent implements OnInit {

    access_token: string = '';
    email: string = '';


    constructor(private http: HttpService) {
        FB.init({
            appId: '****APP ID **********',
            cookie: false,  // enable cookies to allow the server to access
            // the session
            xfbml: true,  // parse social plugins on this page
            version: 'v2.5' // use graph api version 2.5
        });
    }

    onFacebookLoginClick() {
        FB.login(this.statusChangeCallback);
    }

    statusChangeCallback(resp: any) {
        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken;
            // var self = this;
            FB.api('/me?fields=name,email', (resp: any) => {
                this.email = resp.email;

                if (this.email !== '' && this.access_token !== '') {

                    var auth = {};
                    auth['accesstoken'] = this.access_token;
                    auth['emailid'] = this.email;

                    console.log(auth);

                    this.send_registeration(auth); //throws Error
                    // this.http.fb_register(this.email, this.access_token); // this Service function also throws Error just the same way
                }
            }, { scope: 'email,public_profile' });

        } else if (resp.status === 'not_authorized') {

        } else {

        }
    }

    send_registeration(auth: any) {
        this.http.postRequest(auth, 'fbinvestors')
            .subscribe(
            data => {
                console.log('Server respond is ');
                console.log(data);
            }
            );
    }
}

这里有更新的功能... Facebook sdk回调似乎早于前面所述......但问题仍然存在

statusChangeCallback(resp: any) {

        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken;

        FB.api('/me?fields=name,email,first_name,last_name,age_range,gender,picture', (resp: any) => {
                this.email = resp.email;
        }, { scope: 'email,public_profile' });


        } 

        var self = this;
        setTimeout(function () {
            if (this.email !== '' && this.access_token !== '') {
                console.log('under if statement');
                var auth = {};
                auth['accesstoken'] = this.access_token;
                auth['emailid'] = this.email;

                console.log(auth); // show variable output as required
// no problem till here

            }
            self.http.postRequest(auth, 'fbinvestors') // this line throws error as shown below
                .subscribe(
                data => {
                    console.log('Server respond is ');
                    console.log(data);
                }
                );

        }, 7000);
    }

新错误与旧版本类似......但现在它没有调用服务方法 - 显示的错误是

TypeError: Cannot read property 'postRequest' of undefined

更新：在线self.http.postRequest（auth，＆＃39; fbinvestors＆＃39;）...自我基本未定义...所以现在我解决了这个问题 1.我可以将类范围（＆＃39; this＆＃39;）作为参数传递给此回调函数 2.如果我可以提供一组回调函数而不仅仅是一个回调函数

请帮助 - 我正在尝试从2天开始解决....

Answer 1

 function (resp: any) {

应该是

(resp: any) =>

否则this.不会指向您当前的组件实例。另请参阅https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 2

看看this excellent Stackoverflow主题。它解释了您所拥有的问题及其解决方案。你的回调函数中的this指的是错误的上下文，因为它最终是从facebook API代码中的某个地方调用的，而不是你的类。因此，您无法使用此this访问其他类函数。

值得庆幸的是，解决方案非常简单：

...
var self = this;
FB.api('/me?fields=name,email', function (resp: any) {
    ...
    self.send_registeration(auth);

通过将this放入一个temorary变量中，并在回调中使用它，您将引用正确的上下文。

Answer 3

我改变了原来的功能

onFacebookLoginClick() {
        FB.login(this.statusChangeCallback);
    }

statusChangeCallback(resp: any) {

        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken;

        FB.api('/me?fields=name,email,first_name,last_name,age_range,gender,picture', (resp: any) => {
                this.email = resp.email;
        }, { scope: 'email,public_profile' });


        } 

        var self = this;
        setTimeout(function () {
            if (this.email !== '' && this.access_token !== '') {
                console.log('under if statement');
                var auth = {};
                auth['accesstoken'] = this.access_token;
                auth['emailid'] = this.email;

                console.log(auth); // show variable output as required
// no problem till here

            }
            self.http.postRequest(auth, 'fbinvestors') // this line throws error as shown below
                .subscribe(
                data => {
                    console.log('Server respond is ');
                    console.log(data);
                }
                );

        }, 7000);
    }

到这个

    onFacebookLoginClick() {
            var self = this;
            FB.login(this.statusChangeCallback);
            var callback = setTimeout(function () {
                if (this.email !== '' && this.access_token) {
                    console.log('send the http request from here');
                    var auth = {};
                    auth['emailid'] = this.email;
                    auth['accesstoken'] = this.access_token;
                    self.httpTest.postRequest(auth, 'fbinvestors')
                        .subscribe(
                        data => {
                            console.log('Server respond is ');
                            console.log(data);
                        }
                        );
                } else {
                    this.callback(); // gave a recursion untill post is not done.
                }

            }, 2000);
        }
statusChangeCallback(resp: any) {

        if (resp.status === 'connected') {
            this.access_token = resp.authResponse.accessToken;

            // var self = this; // as shown on online to solve the 'this' keyword problem
            console.log(this.httpTest + ' is the service I want to access');
            FB.api('/me?fields=name,email,first_name,last_name,age_range,gender,picture',
                (resp: any, httpService: any = this.httpTest) => {
                    this.email = resp.email;
                });
        } else if (resp.status === 'not_authorized') {

        } else {

        }
    }

通过递归回调等待来自fb的响应显然不是一个好主意......但是现在它已经解决了问题直到我找不到合适的解决方案

不能从facebook sdk api function

3 个答案: