angular2 @output 什么时候解决？

Question

考虑这个plunker

HTML

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

打字稿

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
    }
}

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

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

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

如果我点击switchdiv然后立即点击show loadingdiv，会显示加载文字，然后setimeout将执行（因为延迟 4 秒），但只有 setimeout 会运行进入错误 ERROR TypeError: Cannot read property 'showLoading' of undefined。这怎么可能？如果 showLoadingForce 成功，则意味着 saveGraphInstance 一定发生了
(load)什么时候执行和解析？我在githubsource code

Answer 1

关于第一季度，

ERROR TypeError: Cannot read property 'showLoading' of undefined

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

参考the "this" problem.

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

使用以下代码在设置超时后隐藏加载图像：已更新plunker

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

JS API Reference

angular2 @output 什么时候解决？

When does angular2 @output resolve?

javascript

highcharts

typescript

angular

angular5