在Angular TypeScript中找不到名称

Question

我不明白为什么我不能打电话给createUser（..）

首先，首先调用renderButton（），然后调用initClient（），但是此函数中未定义“ this”，为什么？因此，我认为我无法调用其他函数。

编辑：我意识到this在initClient()的开头已经是未定义的。如果我将gapi.load('client:auth2', this.initClient);更改为gapi.load('client:auth2', this.initClient());，则可以使用this，但是client则不是：/

请赐教！

public renderButton() {
    gapi.load('client:auth2', this.initClient);
}

public initClient() {
    let arr = [sessionStorage.getItem("DISCOVERY_DOCS")]

    gapi.client.init({
        apiKey : sessionStorage.getItem("API_KEY"),
        clientId : sessionStorage.getItem("CLIENT_ID"),
        discoveryDocs : arr,
        scope : sessionStorage.getItem("SCOPES")

    }).then(function () {
        gapi.auth2.getAuthInstance().signIn();
        const authInstance = gapi.auth2.getAuthInstance();
        authInstance.grantOfflineAccess()
            .then((res) => {

                this.createUser(authInstance.currentUser.ie, res.code, "GMAIL");

            });

    }, function (error) {
        console.log(error);
    });
}

public createUser(googleUserJson, code, source) {
// do something
}

Answer 1

this是未定义的，因为您要在新的函数范围内访问它。为了将类对象实例用作this（您想要的），必须使用一个箭头函数，该函数不会创建自己的this绑定。这是操作方法-用箭头函数替换Promise的then回调：

() => {
    gapi.auth2.getAuthInstance().signIn();
    const authInstance = gapi.auth2.getAuthInstance();
    authInstance.grantOfflineAccess()
      .then((res) => {
          // now "this" will be the expected class instance
          // and you will have the "createUser" method 
          this.createUser(authInstance.currentUser.ie, res.code, "GMAIL");
      });

}, (error) => {
    console.log(error);
}

Answer 2

import { Component, OnInit, NgZone } from '@angular/core';
import { environment } from 'src/environments/environment';
import { Storage } from '@ionic/storage';
declare var gapi : any;


@Component({
  selector: 'app-google',
  templateUrl: './google.page.html',
  styleUrls: ['./google.page.scss'],
})
export class GooglePage implements OnInit {

  constructor(
        private ngZone: NgZone,
        private storage: Storage,
    ) {
    }

  ngOnInit() {

    this.getGTokens()
  }


CLIENT_ID;
API_KEY;
DISCOVERY_DOCS;
SCOPES;






getGTokens() {
    const Http = new XMLHttpRequest();
    const path = 'get_tokens';
    let url = environment.server_url + path; 

    Http.open("GET", url);
    Http.setRequestHeader("Content-Type","application/json;charset=UTF-8");
    Http.setRequestHeader("Token","...");
    Http.send();
    Http.onreadystatechange = (e) => {
        if (Http.readyState == 4 ){
            if (Http.status == 200) {
                var result =  JSON.parse(Http.response);
                this.init(result);
            }else{
                console.log(Http.response);
            }
        }
    }
}


init(json) {

  if (json == null) {
      alert("error : cannot find google tokens file");
  }
  else {
    sessionStorage.setItem('CLIENT_ID', json["CLIENT_ID"]);
    sessionStorage.setItem('API_KEY', json["API_KEY"]);
    sessionStorage.setItem('DISCOVERY_DOCS', json["DISCOVERY_DOCS"]);
    sessionStorage.setItem('SCOPES', json["SCOPES"]);


    console.log("API_KEY : "+sessionStorage.getItem("API_KEY"))
    console.log("CLIENT_ID :"+sessionStorage.getItem("CLIENT_ID"))
    console.log("DISCOVERY_DOCS :"+ sessionStorage.getItem("DISCOVERY_DOCS"))
    console.log("SCOPES :"+sessionStorage.getItem("SCOPES"))



  }

}


public renderButton() {
    console.log(this)
    gapi.load('client:auth2', this.initClient());
}

public initClient() {
console.log(this)
    let arr = [sessionStorage.getItem("DISCOVERY_DOCS")]
    gapi.client.init({

        apiKey : sessionStorage.getItem("API_KEY"),
        clientId : sessionStorage.getItem("CLIENT_ID"),
        discoveryDocs : arr,
        scope : sessionStorage.getItem("SCOPES")
    }).then( () => {
        gapi.auth2.getAuthInstance().signIn();
        const authInstance = gapi.auth2.getAuthInstance();
        authInstance.grantOfflineAccess()
            .then((res) => {
                console.log(this)
                console.log(res)
                console.log(authInstance.currentUser);
                this.createUser(authInstance.currentUser.ie, res.code, "GMAIL");

            });

    }, function (error) {
        console.log(error);
    });
}

public createUser(googleUserJson, code, source) {
    if (googleUserJson.uc == null) {
        alert("Erreur au niveau des information transmise par Google");

    } else {
        googleUserJson.uc.code = code;
        googleUserJson.source = source;
        googleUserJson.email = mail;

        var objectDataString = JSON.stringify(googleUserJson);


        const Http = new XMLHttpRequest();
        const url = '/register_account';

        Http.open("POST", url,true);
        Http.setRequestHeader("Content-Type","application/json;charset=UTF-8");
        Http.setRequestHeader("Token", sessionStorage.getItem("token"));
        Http.send(objectDataString);
        Http.onreadystatechange = (e) => {
            if (Http.readyState == 4 ){
                if ( Http.status == 200) {
                    alert(Http.responseText);
                    // débloquer les boutons synthèses et donnés
                }else{
                     alert(Http.responseText);
                }
            }
        }
     }
}

}