Angular2在回調中訪問綁定實例變量

Question

在angular2中，我具有以下組件：

import { Component } from '@angular/core';

const dialog = require("electron").dialog;
const xml2js = require('xml2js');
const fs = require("fs");
const ipc = require('electron').ipcRenderer;

@Component({
  selector: 'ct-config-editor',
  templateUrl: 'config.editor.component.html'
})
export class ConfigEditorComponent {

  constructor() {
    this.selected_file = 'Max';
  }


  clicked(event){
    alert("lol");
      ipc.send('open-file-dialog');

      ipc.on('selected-directory', function (event, path) {
        this.selected_file = `You selected: ${path}`;
      });
  }
}

該視圖具有正確綁定的屬性，稱為selected_file，如下所示：

<h1>{{selected_file}}</h1>

H1的值在開始時是最大值-但是，在我的回調運行之后，我無法訪問this.selected_file因為“ this”的上下文不是我的課程。

如何在回調中訪問我的實例變量？

Answer 1

使用箭頭功能保留上下文：

ipc.on('selected-directory', (event, path) => {
   this.selected_file = `You selected: ${path}`;
});

這樣， this將被引用給您的班級

在這里查看更多詳細信息

• https://developer.mozilla.org/zh_CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this