试图理解在角5。然后范围(Trying to understand scope on angular

2019-09-27 04:04发布

在这个例子中,我创建了诺言工作正常。

但是从谷歌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发箭的功能,作为在帖子中写道。

“他们总是用这个值从封闭的范围。” ......“不管你嵌套使用多少级的,箭头函数总是有正确的上下文。”

因此,而不是创建bindingselfthatwherever ,我认为这是更清洁的使用=>

它被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() ); 我不是传递一个参数。

这件事可能是简单了很多人,但自从我学习,我会尽量做到简单的为他人所学习过。

感谢大家。

Answer 1:

在这里,你正在失去的范围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

工作演示



Answer 2:

this是永远的方法被调用的对象。 然而,通过该方法时,则(),你是不是调用它! 该方法将存储在某个地方,并从那里以后调用。

如果你想保留这一点,你需要面前保持这样的:

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


文章来源: Trying to understand scope on angular 5 .then