Как вызвать код, который, кажется, снова работает внутри ngAfterViewInit () в отдельной функции?

Question

У меня есть следующий код в Angular 4.x, который загружает редактор изображений (PhotoEditorSDK) в компонент HTML - внутри ngAfterViewInit() есть раздел, который прослушивает событие export и запускает processImage()в основном сохранить измененное изображение в браузере.

В #editor находится SDK, который имеет свою собственную кнопку для «экспорта» изображения - однако я хочу создать свою собственную пользовательскую кнопку, которая сможетреплицируйте функциональность export, слушая событие export и сохраняя изображение.

Кнопка в компоненте HTML вызывает saveImage(), и по какой-то причине она вызывает логин в следующем коде (полагаю,так как другой код находится в пределах жизненного цикла ngAfterViewInit.

Как заставить работать saveImage (), чтобы он выполнял функцию this.processImage(result)? В настоящее время в этой функции я могу console.log для this.editorInstanceно по какой-то причине он никогда не покажет результат - кто-нибудь может мне помочь?

export class PhotoeditorComponent implements AfterViewInit {
@ViewChild('editor') editor: ElementRef;

constructor() {        
}

ngAfterViewInit(): void {
    // load the SDK
    image.addEventListener('load', () => {
        const editor = new PhotoEditorSDK.UI.ReactUI({
            container: this.editor.nativeElement,
            editor: {
                image: image
            }
        });

        this.editorInstance = editor;

        editor.on('export', (result) => {
            this.processImage(result);
        });
    }); // end event listener

}

public saveImage() {
    this.editorInstance.on('export', (result) => {
        console.log(result);
        this.processImage(result);
    });
  }
}

// html component

<div class="photoeditor">
  <div class="container container-header">
    <div style="width: 800px;max-height:600px;min-height:64vh;" #editor> 
  </div>
  <div id="btnGroup">
    <button mat-button (click)="saveImage()">SAVE</button>
  </div>
 </div>
</div>