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触发器或用户启动后完成，则它始终有效。

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

如果我点击switch div并立即点击show loading div，将显示加载文字，然后setimeout将执行（因为4秒延迟），但只有setimeout会遇到错误ERROR TypeError: Cannot read property 'showLoading' of undefined。怎么可能？如果showLoadingForce成功，则表示saveGraphInstance必定已发生
(load)何时执行并解决？我在github source code

Answer 1

关于Q1，

错误类型错误：无法读取未定义的属性“showLoading”

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

请参阅the "this" problem.

关于Q2，load被定义为ChartComponent中的输出ChartEvent绑定。这将调用EventEmitter的新实例。

使用以下代码隐藏setTimeout后的加载图像：更新了plunker

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

JS API Reference

angular2 @output什么时候解决？

1 个答案: