从jquery summernote调用父组件函数

Question

我正试图调用一个在我添加到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
}
};

Answer 1

在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();
}