将脚本标签插入 Angular 4 HTML 组件答案

【问题标题】：Insert script tag into Angular 4 HTML Component将脚本标签插入 Angular 4 HTML 组件
【发布时间】：2018-11-13 15:09:49
【问题描述】：

我正在尝试从这个网站实现 PhotoeditorSDK 的 HTML5 版本 - 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>
  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>

我正在尝试找出在 Angular 4 组件中直接使用上述 <script> 的最佳方法 - 我知道这是最佳做法，但最好的方法是什么？

【问题讨论】：

这根本不是最佳实践！最佳做法是将 .js 文件保存在 assets 文件夹中，并在 angular-cli.json（或最新版本中的 angular.json）中声明此脚本，以便在构建时导入。

标签： javascript angular html photoeditorsdk

【解决方案1】：

您的组件有一个 id 为 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'
  }
}

【讨论】：

感谢@Pierre - 现在更有意义了，我现在看到的错误是找不到PhotoEditorSDK（这些是在 index.html 中加载的）但我认为 Angular 4 需要这个以不同的方式加载 - 这将如何工作？
如果您确定它们已加载，您需要添加declare const PhotoEditorSDK: any; 我会更新我的答案。如果他们有打字，那将是最好的
对不起，我的错 - 我可以直接在控制台中查看 PhotoEditorSDK，但是当我运行 ng serve 来重建应用程序时，我收到错误：Cannot find name 'PhotoEditorSDK' - 我添加了组件如果有帮助，请参考以下要点：) gist.github.com/gkimpson/cd36b6278169f0e7e3af32c810ef87b1
我会多玩一点，稍后再回到这个线程，因为它几乎就在那里，你的建议让我朝着正确的方向前进:)
@Zabs 可能无法加载图像，因为您没有将其添加到您的资产文件夹。该图像的网络请求选项卡中是否有 404？如果有 404，我相信它不会触发 load 事件。但是现在可以正常工作了：)