0

我有一个应用程序，我想在其中使用PhotoEditorSDK组件。他们的角度实现演示表明他们希望我使用

@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事件：

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

4

1 回答 1

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));
  }
}
于 2017-11-28T07:50:16.633 回答