Angular 7中Froala自定义按钮调用类内方法报错求助

这个问题的核心是Froala编辑器回调函数里的this指向不对——默认情况下，callback里的this引用的是FroalaEditor的实例，而不是你的Angular组件类，所以找不到组件里的openPictureModal方法。

解决这个问题有两种简单可靠的方式，选哪种都可以：

方法一：使用箭头函数绑定组件上下文 #

箭头函数不会创建自己的this，它会继承外层作用域的this（也就是你的组件类实例）。修改你的命令注册代码：

$.FroalaEditor.DefineIcon('imagePicker', {NAME: 'info'});
$.FroalaEditor.RegisterCommand('imagePicker', {
  title: 'Image picker',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  // 把普通函数改成箭头函数
  callback: (data) => {
    this.openPictureModal(); // 这里的this现在指向组件类了
  }
});

方法二：提前保存组件的this到变量 #

如果习惯用普通函数，你可以先把组件的this存到一个变量（比如that）里，然后在回调里引用这个变量：

// 先保存组件的this
const that = this;

$.FroalaEditor.DefineIcon('imagePicker', {NAME: 'info'});
$.FroalaEditor.RegisterCommand('imagePicker', {
  title: 'Image picker',
  focus: false,
  undo: false,
  refreshAfterCallback: false,
  callback: function (data) {
    that.openPictureModal(); // 用that代替this，指向组件类
  }
});

完整示例代码 #

把上述逻辑放到你的组件初始化方法里（比如ngOnInit），完整代码大概是这样：

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { PictureManageComponent } from './path-to-your-component/picture-manage.component';

// 确保jQuery已正确引入
declare var $: any;

@Component({
  selector: 'app-your-editor-component',
  templateUrl: './your-editor-component.component.html',
  styleUrls: ['./your-editor-component.component.css']
})
export class YourEditorComponent implements OnInit {

  constructor(private modalService: NgbModal) { }

  ngOnInit(): void {
    // 定义自定义按钮图标
    $.FroalaEditor.DefineIcon('imagePicker', {NAME: 'info'});
    
    // 注册自定义命令，用箭头函数绑定组件this
    $.FroalaEditor.RegisterCommand('imagePicker', {
      title: 'Image picker',
      focus: false,
      undo: false,
      refreshAfterCallback: false,
      callback: (data) => {
        this.openPictureModal();
      }
    });
  }

  openPictureModal() {
    const modalRef = this.modalService.open(PictureManageComponent, { size: 'lg' });
    modalRef.componentInstance.formFinished.subscribe(($event) => {
      modalRef.close();
    });
  }
}

这样修改后，点击自定义按钮就能正确调用组件里的openPictureModal方法了。

内容的提问来源于stack exchange，提问作者Jonathan Clark