Question

在这个例子中，我创建的承诺正常。

但谷歌api的承诺不起作用。

它表示this.youtube未定义

的index.html
<script src="https://apis.google.com/js/api.js"></script>

app.component.html

<button (click)="customClick()">custom Promise</button>
<hr>

<hello name="{{ youtube }}"></hello>
<button (click)="youtubeClick()">youtube Promise</button>

app.component.ts

import { Component } from '@angular/core';
import {  } from '@types/gapi.client.youtube';
import {  } from '@types/gapi.auth2';


export class AppComponent  {

  name = 'Angular 5';
  youtube = 'youtube';

  egPromise(){
    return new Promise<void>((resolve, reject) => {
      setTimeout(function(){
        resolve();
      }, 1000);
    });
  }

  customPromise(){
    this.egPromise().then( () => {
      this.name = 'from .then angular 5'
    });
  }

  customClick(){
    this.customPromise();
  }
/****************************************************/

youtubePromise(){
  gapi.client.init({
        apiKey: 'key',
        clientId: 'id',
        scope: "https://www.googleapis.com/auth/youtube.readonly",
        discoveryDocs: [
            "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
        ]
        }).then(() => {
      this.youtube = 'from .then youtube'
    });
}

youtubeClick(){
  gapi.load('client:auth2', this.youtubePromise);
}

编辑：解决方案/解释

在@ vivek-doshi的帮助下

我发现这篇文章搜索“绑定此”

https://www.sitepoint.com/bind-javascripts-this-keyword-react/

正如帖子解释

“并不总是清楚这会在你的代码中引用什么，特别是在处理回调函数时，你无法控制它们。”

由于我正在使用Google API，因此我无法控制该代码。

“这是因为当调用promise的回调时，函数的内部上下文会被更改，这会引用错误的对象。”

加载库的功能使用回调函数，甚至没有想到第一个回调就是问题。

正如帖子所说，使用ES2015 Fat Arrows功能。

“他们总是使用封闭范围内的值。” ......“无论您使用多少级别的嵌套，箭头函数都将始终具有正确的上下文。”

因此，我认为不是创建binding和self以及that和wherever，而是使用=>

令我困惑的另一件事是google api无需争论即可回复。

所以，如果你尝试使用 const that = this; gapi.load('client:auth2', this.start(that) );

它会抱怨。

但是使用gapi.load('client:auth2', () => this.start() );我没有传递论据。

这对很多人来说可能很简单，但是既然我正在学习，我会尝试让那些正在学习的人变得简单。

谢谢大家。

Answer 1

this始终是调用方法的对象。但是，当将方法传递给then（）时，你没有调用它！该方法将存储在某个地方并稍后从那里调用。

如果你想保留它，你需要在以下之前保留它：

var that = this;
// ...
.then(function() { that.method() })

Answer 2

通过调用：

，您将失去this的范围

gapi.load('client:auth2', this.youtubePromise);

将上述代码更改为：

gapi.load('client:auth2', () => this.youtubePromise()); // ES6 Way
// OR
gapi.load('client:auth2', this.youtubePromise.bind(this)); // Traditional old way of doing

<强> WORKING DEMO

试图理解角度5的范围。然后

编辑：解决方案/解释

2 个答案: