从 jquery summernote 调用父组件函数

问题描述

我正在尝试调用我添加到 ngx-summernote 工具栏的自定义按钮组件之外的函数。我当前的代码如下。这无法编译，但是我在它编译的地方尝试过的所有其他方法都给了我找不到该函数的错误。角 8.

test() {
    console.log('oh hai');
  }


  customButton() {
    const ui = $.summernote.ui;
    const button = ui.button({
        contents: '<i class="note-icon-magic"></i> hello',tooltip: 'custom button',container: '.note-editor',className: 'note-btn',click: function() => {
          this.test()
        }
      });
    return button.render();
  }


  //summernote config
  config: any = {
    placeholder: 'Enter a description. You can #define up to 5 #hashtags.',height: "200px",uploadImagePath: "/api/upload",disableDragAndDrop: true,tabdisable: true,toolbar: [
      [
        "font",[
          "bold","italic","underline","strikethrough","superscript","subscript","color","testBtn",],buttons: {
      'testBtn' : this.customButton
    }
  };

解决方法

在imports语句下方的顶部声明一个变量-

let thisContext;

在 ngOnInit 中用这个对象初始化它 -

ngOnInit() {
    thisContext = this;
}

在组件类中保留测试方法 -

使用该变量调用 test() 函数 -

import { Component,OnInit } from '@angular/core';
import { FormControl,FormGroup,Validators } from '@angular/forms';
import { DomSanitizer } from '@angular/platform-browser';
import { codeBlockButton } from 'ngx-summernote';

declare var $;
let thisContext;
@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 
  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit() {
    thisContext = this;
  }

  
  test(){
    console.log("hi");
  }
}

function customButton(context) {
  const ui = $.summernote.ui;
  const button = ui.button({
    contents: '<i class="note-icon-magic"></i> Hello',tooltip: 'Custom button',container: '.note-editor',className: 'note-btn',click: function() {
      context.invoke('editor.insertText','Hello from test btn!!!');
      thisContext.test();
    }
  });
  return button.render();
}

angular angular