javascript - angular2 @output 什么时候解决？

Question

考虑这个 plunker

HTML

<chart [options]="options" 
       (load)="saveGraphInstance($event.context)"></chart>
<div (click)="switchGraph()">switch</div>
<div (click)="showLoadingForce()">show loading</div>

typescript

class AppComponent {
    constructor() { 
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129],
            }],
            lang:{
                loading: 'your text here',
            },
        };
    }
    options: Object;
    graph: any;

    switchGraph() {
      this.options = {
            title : { text : 'different chart' },
            series: [{
                data: [129.9, 171.5, 106.4, 129],
            }],
            lang:{
                loading: 'your text here',
            },
        };
        this.graph.showLoading() // This doesn't work
        setTimeout(function() {
            this.graph.showLoading() // This also doesn't work
        }, 4000);
    }

    showLoadingForce() {
      this.graph.showLoading() // User clicked work
    }

    saveGraphInstance(graph) {
      this.graph = graph;
      //this.graph.showLoading() // after loading work
    }
}

从上面的代码我们看到，在同一个函数中，option改变，即使我设置超时超过4秒，show loading也不起作用

但如果它在 load 触发器或用户启动之后完成，那么它总是有效。

这很有趣，所以我的问题如下

1. 如果我点击switch div 并立即点击show loading div，加载文本将会显示，然后setimeout 将执行(因为延迟 4 秒)，但只有 setimeout 会遇到错误 ERROR TypeError: Cannot read property 'showLoading' of undefined。这怎么可能？如果 showLoadingForce 成功，则意味着 saveGraphInstance 一定发生了

2. (load) 什么时候执行和解析？我在github上找不到相关信息source code

Answer 1

关于第一季度，

ERROR TypeError: Cannot read property 'showLoading' of undefined

这是在 setTimeout() 中访问 this 的问题。在 setTimeout 方法中 this 默认为 window 对象。要修复此传递，请保存对此的引用，然后在 setTimeout 方法中访问它。

引用the "this" problem.

关于第 2 季度，负载定义为 ChartComponent 中的输出 ChartEvent 绑定(bind)。这将调用 EventEmitter 的新实例。

使用以下代码在 setTimeout 后隐藏加载图像:已更新 plunker

 saveGraphInstance(graph) {
      this.graph = graph;
      this.graph.showLoading();
      var that = this;
      setTimeout(function(graph) {
            that.graph.hideLoading();
        }, 4000);
    }

JS API Reference