Вставьте тег сценария в HTML-компонент Angular 4 - PullRequest
Новая
       17

Вставьте тег сценария в HTML-компонент Angular 4

0 голосов
/ 13 ноября 2018

Я пытаюсь реализовать HTML5-версию PhotoeditorSDK с этого сайта - https://docs.photoeditorsdk.com/guides/html5/v4/introduction/getting_started

Я пытался реализовать с использованием Angular Github repo , но кажется, что package.json иллюстрирует, что это работает только для Angular 5 и 6, и наше приложение в настоящее время немного устарело, поскольку Angular 4.x ( и мы не можем перейти на 5 в настоящее время)

Использовать метод HTML5 довольно просто в простом приложении, но в Angular 4 это кажется сложным, так как из-за ограничений Angular я не могу использовать <script> теги внутри компонента.

В указателе <head> я добавил следующее: 

<head>
  <!-- React Dependencies for the SDK UI -->
  <script src="js/vendor/react.production.min.js"></script>
  <script src="js/vendor/react-dom.production.min.js"></script>
  <!-- PhotoEditor SDK-->
  <script src="js/PhotoEditorSDK.min.js"></script>
  <!-- PhotoEditor SDK UI -->
  <script src="js/PhotoEditorSDK.UI.DesktopUI.min.js"></script>
  <link rel="stylesheet" href="css/PhotoEditorSDK.UI.DesktopUI.min.css"/>
</head>

В самом шаблоне есть простой <div> следующим образом: 

<div id="editor" style="width: 100vw; height: 100vh;"></div>

Сам тег script выглядит следующим образом - и в основном прикрепляет изображение, которое будет отображаться в редакторе для редактирования и т. Д. 

<script>
  window.onload = function () {
    var image = new Image()
    image.onload = function () {
      var container = document.getElementById('editor')
      var editor = new PhotoEditorSDK.UI.DesktopUI({
      container: container,
      // Please replace this with your license:    https://www.photoeditorsdk.com/dashboard/subscriptions
    license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
    editor: {
      image: image
    },
    assets: {
      // This should be the absolute path to your `assets` directory
      baseUrl: '/assets'
    }
   })
  }
    image.src = './example.jpg'
}
</script>

Я пытаюсь найти лучший способ использовать <script> выше непосредственно в Angular 4 Component - я знаю, что это лучшая практика, но как лучше всего это сделать?

1 Ответ

0 голосов
/ 13 ноября 2018

Ваш компонент имеет элемент с идентификатором editor. Это будет доступно только в хуке ngAfterViewInit компонента. Как только это называется, window.onload был вызван давным-давно. Кроме того, когда вызывается onload, элемент еще вообще не существует, поэтому также плохая идея поместить его туда.

Лучше всего было бы вызвать метод изнутри ngAfterViewInit вашего компонента и использовать аннотацию @ViewChild: 

declare const PhotoEditorSDK: any;

@Component({
  template: `<div style="width: 100vw; height: 100vh;" #editor></div>`
})
export class EditorComponent implements AfterViewInit {

  @ViewChild('editor') editor: ElementRef<HTMLElement>; 

  ngAfterViewInit(): void {
    const image = new Image();
    image.addEventListener('load', () => {
      const editor = new PhotoEditorSDK.UI.DesktopUI({
        container: this.editor.nativeElement,
        license: '{"owner":"Imgly Inc.","version":"2.1", ...}',
        editor: {
          image
        },
        assets: {
          baseUrl: '/assets'
        }
      });
    });

    image.src = './example.jpg'
  }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...