在这个例子中,我创建了诺言工作正常。
但是从谷歌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);
}
编辑:解决方案/解释
随着@维韦克 - 多希的帮助
我发现这个职位搜索“绑定这个”
https://www.sitepoint.com/bind-javascripts-this-keyword-react/
而作为后解释
“它并不总是很清楚这是什么东西要与回调函数,其callsites你有没有控制权时务请参考你的代码,更是如此。”
由于我与谷歌API的工作,我有过的代码无法控制。
“这是因为当回调的承诺被调用时,函数内部的情况下改变这种引用错了对象。”
和函数加载库使用一个回调函数,甚至不穿过我的脑海,第一回调是问题。
因此,使用ES2015发箭的功能,作为在帖子中写道。
“他们总是用这个值从封闭的范围。” ......“不管你嵌套使用多少级的,箭头函数总是有正确的上下文。”
因此,而不是创建binding
和self
和that
和wherever
,我认为这是更清洁的使用=>
它被confunsing我另一件事是,对于不带参数的回调谷歌的API AKS。
所以,如果你尝试使用const that = this; gapi.load('client:auth2', this.start(that) );
const that = this; gapi.load('client:auth2', this.start(that) );
它会抱怨。
但使用gapi.load('client:auth2', () => this.start() );
我不是传递一个参数。
这件事可能是简单了很多人,但自从我学习,我会尽量做到简单的为他人所学习过。
感谢大家。