Обработчик изображения Quilljs завершился неудачно при открытии модального в материале Angular - PullRequest
1 голос
/ 07 мая 2019

Я хочу переопределить поведение кнопки изображения 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.

Есть идеи?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...