Hören Sie auf Ereignisse von PhotoEditorSDK in Angular

Question

Ich habe eine App, wo ich die PhotoEditorSDK Komponente verwenden möchte. Their demos for angular implementation heißt es, dass sie mich wollen, dass diese

@Component({ 
    selector: 'app-photo-editor', 
    template: `<ngui-react [reactComponent]="reactComponent" [reactProps]="reactProps"></ngui-react>`, 
    styleUrls: ['./photo-editor.component.scss'] 
}) 
export class PhotoEditorComponent implements OnInit { 
    @Input() src: string; 
    image = new Image(); 

    defaultProps = { 
    license: license, 
    assets: { 
     baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton 
    }, 
    responsive: true, 
    style:{ 
     width: '100%', 
     height: '100%' 
    }, 
    editor: { 
     image: this.image 
    } 
    }; 

    reactComponent: React.Component = PhotoEditorDesktopUI.ReactComponent; 
    reactProps: any = {...this.defaultProps}; 

    constructor(private el: ElementRef, private translate: TranslateService) { } 

    ngOnInit() { 
    this.image.src = this.src; 
    } 
} 

Dies funktioniert gut mit einzurichten. Ich erhalte die gerenderte React-Komponente in meiner Angular-App. Jetzt möchte ich einen Ereignis-Listener für das gerenderte Objekt registrieren. Their documentation Zustand, dass sie zumindest ein export Ereignis ausgesetzt:

editor.on('export', (result) => { 
    console.log('User clicked export, resulting image/dataurl:', result) 
}) 

Aber ich erzeuge nicht die editor mich. Dieses Objekt wird erstellt, indem der Komponententyp an ngui-react übertragen und innerhalb dieser Anweisung erstellt wird. Wie erhalte ich das erstellte PhotoEditorSDK-Objekt, damit ich Event-Listener darauf platzieren kann?

Ich habe versucht, auf

this.reactComponent.on(....) 

Aber PhotoEditorDesktopUI !== this.reactComponent die Ereignis-Listener zu setzen. Die reactComponent ist ein Container für das erstellte Objekt PhotoEditorDesktopUI.

Answer 1

Im Folgenden hat den Trick:

import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef, Input, Inject, EventEmitter, Output } from '@angular/core'; 
import PhotoEditorDesktopUI from 'photoeditorsdk/js/PhotoEditorSDK.UI.DesktopUI'; 

// !! IMPORTANT !! 
import * as React from 'react' 
import * as ReactDom from 'react-dom' 


declare global { 
    interface Window { React: any; ReactDom: any; } 
} 
window.React = window.React || React 
window.ReactDom = window.ReactDom || ReactDom 
// /END !! IMPORTANT !! 

@Component({ 
    selector: 'app-photo-editor', 
    template: '', 
    styles: [':host { display: flex; width: 100%; min-height: 30rem; }'] 
}) 
export class PhotoEditorComponent implements OnInit { 
    @Input() src: string; 
    @Output() srcChange = new EventEmitter<string>(); 
    image = new Image(); 
    editor; 

    constructor(private el: ElementRef) { } 

    ngOnInit() { 
    this.image.src = this.src; 
    this.editor = new PhotoEditorDesktopUI({ 
     container: this.el.nativeElement, 
     license: license, 
     assets: { 
     baseUrl: '/assets/photoeditorsdk' // see angular-cli.json for configuraton 
     }, 
     responsive: true, 
     style: { 
     width: '100%', 
     height: '100%' 
     }, 
     editor: { 
     image: this.image, 
     export: { 
      download: false 
     } 
     }, 
    }); 
    this.editor.on('export', (result) => this.srcChange.emit(result)); 
    } 
}