Я хочу переопределить поведение кнопки изображения Quill, используя пользовательскую функцию, которая открывает модальный угловой материал.
Компонент html
<form>
<mat-form-field appearance="outline">
<input matInput placeholder="Titulo" type="text">
</mat-form-field>
<div class="editor-wrapper">
<quill-editor required="true" id="editor" (onEditorCreated)="getEditorInstance($event)">
<div quill-editor-toolbar>
<span class="ql-formats">
<select class="ql-size"></select>
<select class="ql-font"></select>
</span>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
</span>
</div>
</quill-editor>
</div>
</form>
Компонент ТС
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material';
import { UploadImageComponent } from './../modals/upload-image/upload-image.component';
@Component({
selector: 'app-write',
templateUrl: './write.component.html',
styleUrls: ['./write.component.scss']
})
export class WriteComponent implements OnInit {
constructor(private dialog: MatDialog) { }
ngOnInit() { }
getEditorInstance(editorInstance: any) {
const toolbar = editorInstance.getModule('toolbar');
toolbar.addHandler('image', this.addImage);
}
public addImage() {
this.dialog.open(UploadImageComponent).afterClosed().subscribe(result => {
console.log('Closed');
});
}
}
Когда я нажимаю на кнопку с изображением, появляется следующее сообщение об ошибке:
ОШИБКА TypeError: Невозможно прочитать свойство 'open' из неопределенного
Похоже, что когда я передаю функцию обработчику, он не может получить доступ к диалоговой переменной в классе WriteComponent.
Есть идеи?