如何在 Angular 2 的 Promise 中调用类方法？答案

【问题标题】：How can I call a class method inside a promise in Angular 2?如何在 Angular 2 的 Promise 中调用类方法？
【发布时间】：2016-12-09 18:59:16
【问题描述】：

如果我有一个 Angular 2 组件，并且我从返回异步承诺或可观察的服务中获取数据，那么我该如何调用组件中的方法来显示该数据？

@Component({
  moduleId: module.id,
  selector: 'charts',
  templateUrl: 'charts.component.html',
  providers: [DataService]
})
export class ChartsComponent implements OnInit {

  constructor(private dataService:DataService)

  ngOnInit() {
    this.getData();
  }

  getData(){
    this.dataService.getData().then(function (data) {
      this.drawChart(data);
    });
  }

  drawChart(){
     //implement drawing chart
  }
}

问题是“this.drawChart()”中的promise“this”不再引用ChartsComponent 类。如何调用类方法 post promise？

另外，我不能将 drawChart() 放在 Promise 中，因为它需要使用其他类属性。

【问题讨论】：

标签： javascript angular promise

【解决方案1】：

当您使用Arrow functions 时，this 会保留：

getData(){
  this.dataService.getData().then((data) => { // <-- changed here
    this.drawChart(data);
  });
}

【讨论】：

谢谢！你救了我很多头撞墙。
这很好用，虽然在我的 IDE 中留下了语法错误，是时候升级工具了。
@Paul 箭头函数是一种新语法，在 ES6 版本的 JS 中可用。您的 IDE 可能支持它，但可能需要配置。
@acdcjunior 看来这在 IE11 中失败了 - 我最初在 chrome 中进行了测试
@Paul 是的，IE11 不支持它。您必须使用 babel 或其他方法对其进行转译。如果您需要 IE11 并且无法编译，我建议您使用类似 this.dataService.getData().then(function (data) { this.drawChart(data); }.bind(this));

【解决方案2】：

有两种解决方案：

1) 使用“自我”：

     var self = this;
     ngOnInit() {
        self.getData();
     }

     getData(){
        self.dataService.getData().then(function (data) {
        self.drawChart(data);
     });

}

2) 使用“绑定方法”（或类似的方法）：

.then(function (data) {
        this.drawChart(data);
     }).bind(this)

你可以找到很多关于这个方法的信息，例如：Use of the JavaScript 'bind' method

我更喜欢第一种解决方案，因为它有助于使代码更加透明。

【讨论】：

谢谢，我正在使用第一个解决方案。