试图了解角度5的范围 [英] Trying to understand scope on angular 5 .then
问题描述
在此示例中，我创建的诺言行之有效.
On this example, the promise that i created works ok.
但是Google api的诺言不起作用.
But the promise from the google api don't work.
它表示this.youtube未定义
index.html
<script src="https://apis.google.com/js/api.js"></script>
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的帮助下
Solution/Explanation
With the help of @vivek-doshi
我找到了搜索绑定此"的帖子
I found this post searching "bind this"
https://www.sitepoint.com/bind-javascripts- this-keyword-react/
正如帖子所解释的
并非总是很清楚这将在代码中引用什么，特别是在处理回调函数时，您无法对其调用场进行控制."
"it’s not always clear what this is going to refer to in your code, especially when dealing with callback functions, whose callsites you have no control over."
由于我使用的是Google API，因此无法控制该代码.
Since I'm working with the google API and i have no control over that code.
这是因为调用promise的回调时，函数的内部上下文被更改，并且引用了错误的对象."
"This is because when the callback to the promise is called, the internal context of the function is changed and this references the wrong object."
加载库的函数使用了回调函数，我什至没有想到第一个回调就是问题.
And the function to load the library use a callback function, and don't even crossed my mind that the first callback was the problem.
因此，正如帖子所述，使用ES2015的Fat Arrows功能.
So using the ES2015 Fat Arrows function, as the post says.
它们始终使用封闭范围中的this的值." ...无论您使用多少级嵌套，箭头函数始终会具有正确的上下文."
"they always use the value of this from the enclosing scope." ... "Regardless of how many levels of nesting you use, arrow functions will always have the correct context."
因此，与创建binding和self和that和wherever相比，我认为使用=>
So instead of creating binding and self and that and wherever, I think that is more clean the use of =>
让我感到困惑的另一件事是，谷歌api请求没有参数的回调.
Other thing that it was confunsing me is that the google api aks for a callback with no argument.
因此，如果您尝试使用
const that = this;
gapi.load('client:auth2', this.start(that) );
So if you try to use
const that = this;
gapi.load('client:auth2', this.start(that) );
会抱怨的.
但是使用gapi.load('client:auth2', () => this.start() );我没有传递参数.
But using gapi.load('client:auth2', () => this.start() ); I'm not passing an argument.
对于很多人来说，这件事可能很简单，但是由于我正在学习，因此我将尝试使其对其他正在学习的人也变得简单.
This things could be simple for a lot of people, but since I'm learning, I will try to make it simple for others that are learning too.
谢谢大家.
推荐答案
在这里您通过调用:
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的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
