从回调中访问类数据

Question

下面的指令向 MessageBus 类注册了一个监听器。它在调用调度函数时执行注册的回调。我需要从回调中访问“dragZoneElems”并对其执行操作。请就如何做到这一点提出建议。目前它说 dropZoneElems = undefined，因为此数据超出了回调范围。但是数据是存在的并且不是未定义的。

export class DragZoneDirective implements OnInit{
   private _messageBus : IMessageBus

   @Input() dragZoneElems: Object[];
   constructor() {
      this._messageBus = MessageBus;
   }

   ngOnInit(){
    this._messageBus.listen("dragStart", function(val) {
        console.log("DragStart", this.dragZoneElems);
        let index = this.dragZoneElems.indexOf(val);
        if(index > -1)
            this.dragZoneElems.slice(index, 1);
    });
    this._messageBus.listen("dragStop", function(val) { console.log("DragStop"); });
   }
 }

消息总线-

static dispatch(event: string, info?: any): void {
     this.listeners
        .forEach((l) => {
           if (l["event"] === event) {
               l["cb"](info);
           }
        });
}

Answer 1

您需要使用箭头函数才能使用词法 this（它对应于您的组件实例）：

this._messageBus.listen("dragStart", (val) => { // <--------
    console.log("DragStart", this.dragZoneElems);
    let index = this.dragZoneElems.indexOf(val);
    if(index > -1)
        this.dragZoneElems.slice(index, 1);
});

有关箭头函数的词法 this 的更多提示，请参见此链接：

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions。