在 Angular 中侦听来自 PhotoEditorSDK 的事件答案

【问题标题】：Listen for events from PhotoEditorSDK in Angular在 Angular 中侦听来自 PhotoEditorSDK 的事件
【发布时间】：2017-11-23 12:11:29
【问题描述】：

我有一个应用程序，我想在其中使用 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 组件。现在我想在渲染对象上注册一个事件监听器。 Their documentation 声明他们至少公开了一个 export 事件：

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 对象的容器。

【问题讨论】：

如果您将以下内容添加到defaultProps，则文档中的示例有效：ref: component => { this.editor = component.ui; }

标签： angular reactjs photoeditorsdk

【解决方案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));
  }
}

【讨论】：