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/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_binding_of_this

Angular2访问回调中的绑定实例变量

1 个答案: