PhotoEditorSDKからイベントを聴く角度

Question

PhotoEditorSDKコンポーネントを使用したいアプリケーションがあります。 Their demos for angular implementationは、私がこれを設定してほしいと述べています。

@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; 
    } 
} 

これは問題なく動作します。私はAngularアプリでレンダリングされたReactコンポーネントを取得します。これで、レンダリングされたオブジェクトにイベントリスナーを登録します。彼らは、少なくともexportイベントを公開Their documentation状態：

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

しかし、私はeditorを自分で作成しないでください。このオブジェクトはngui-reactにコンポーネントタイプを送信することによって作成され、このディレクティブ内に作成されます。作成したPhotoEditorSDKオブジェクトを保持するにはどうすればよいのですか？イベントリスナーを置くことができますか？

私は

this.reactComponent.on(....) 

しかしPhotoEditorDesktopUI !== this.reactComponentにイベントリスナーを設定しようとしました。 reactComponentは、作成されたPhotoEditorDesktopUIオブジェクトのコンテナです。

Answer 1

以下は、トリックをした：

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