Javascript 在Angular 4 HTML组件中插入脚本标记_Javascript_Angular_Html_Photoeditorsdk

Javascript 在Angular 4 HTML组件中插入脚本标记

javascript angular html

Javascript 在Angular 4 HTML组件中插入脚本标记,javascript,angular,html,photoeditorsdk,Javascript,Angular,Html,Photoeditorsdk,我正试图从这个网站上实现PhotoeditorSDK的HTML5版本- 我曾尝试使用实现，但似乎package.json仅适用于Angular 5和6，我们的应用程序目前有点过时，即Angular 4.x（目前我们无法升级到5）在一个简单的应用程序中使用HTML5方法相当容易，但在Angular 4中，这似乎很棘手，因为由于角度限制，我无法在组件中使用标记在索引中，我添加了以下内容： <head> <!-- React Dependencies for the SDK

我正试图从这个网站上实现PhotoeditorSDK的HTML5版本-

我曾尝试使用实现，但似乎package.json仅适用于Angular 5和6，我们的应用程序目前有点过时，即Angular 4.x（目前我们无法升级到5）

在一个简单的应用程序中使用HTML5方法相当容易，但在Angular 4中，这似乎很棘手，因为由于角度限制，我无法在组件中使用

标记

在索引

中，我添加了以下内容：

<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 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>


window.onload=函数（）{
var image=新映像（）
image.onload=函数（）{
var container=document.getElementById（'编辑器'）
var editor=新的PhotoEditorSDK.UI.DesktopUI({
货柜:货柜,，
//请将其替换为您的许可证：https://www.photoeditorsdk.com/dashboard/subscriptions
许可证：{“所有者”：“Imgly公司”，“版本”：“2.1”，…}，
编辑:{
图像：图像
},
资产：{
//这应该是“资产”目录的绝对路径
baseUrl:“/assets”
}
})
}
image.src='./example.jpg'
}

我正试图找出在Angular 4组件中直接使用上面的

的最佳方法-我知道这是最佳做法，但最好的方法是什么？

您的组件有一个id为

editor

的元素。这将仅在组件的

ngAfterViewInit

挂钩中可用。调用此函数后，很久以前就调用了

窗口.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'
  }
}

declare const PhotoEditorSDK:any；
@组成部分({
模板：``
})
导出类编辑器组件在ViewInit之后实现{
@ViewChild（“编辑器”）编辑器：ElementRef；
ngAfterViewInit（）：void{
常量图像=新图像（）；
image.addEventListener（'load'，（）=>{
常量编辑器=新的PhotoEditorSDK.UI.DesktopUI({
容器：this.editor.nativeElement，
许可证：{“所有者”：“Imgly公司”，“版本”：“2.1”，…}，
编辑:{
形象
},
资产：{
baseUrl:“/assets”
}
});
});
image.src='./example.jpg'
}
}

您的组件有一个id为编辑器的元素。这将仅在组件的

ngAfterViewInit

挂钩中可用。调用此函数后，很久以前就调用了

窗口.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'
  }
}

declare const PhotoEditorSDK:any；
@组成部分({
模板：``
})
导出类编辑器组件在ViewInit之后实现{
@ViewChild（“编辑器”）编辑器：ElementRef；
ngAfterViewInit（）：void{
常量图像=新图像（）；
image.addEventListener（'load'，（）=>{
常量编辑器=新的PhotoEditorSDK.UI.DesktopUI({
容器：this.editor.nativeElement，
许可证：{“所有者”：“Imgly公司”，“版本”：“2.1”，…}，
编辑:{
形象
},
资产：{
baseUrl:“/assets”
}
});
});
image.src='./example.jpg'
}
}

这根本不是最佳做法！最佳做法是将.js文件保存在

assets

文件夹中，并在

angular cli.json

（或最新版本的

angular.json

）中声明此脚本，以便在构建时导入。这根本不是最佳做法！最佳做法是将.js文件保存在

assets

文件夹中，并在

angular cli.json

（或最新版本中的

angular.json

）中声明此脚本，以便在构建时导入。谢谢@Pierre-现在更有意义了，我现在看到的错误是找不到

PhotoEditorSDK

（它们在index.html中加载），但我认为Angular 4要求以不同的方式加载-这将如何工作？如果您确定它们已加载，则需要添加

声明常量PhotoEditorSDK:any我将更新我的答案。如果他们有打字功能，那就最好了，尽管抱歉我的错误-当我直接在控制台中查看PhotoEditorSDK时，我可以看到它，但当我运行ng serve
重建应用程序时，我会得到错误：找不到名称“PhotoEditorSDK”
-如果有帮助，我在下面的要点中添加了组件：）我会处理一下这个问题更多，稍后再回到这个帖子，因为它就快到了，你的建议让我找到了正确的方向：）@Zabs也许图像没有加载，因为你没有将它添加到你的资产文件夹中。该映像的网络请求选项卡中是否有404？我相信如果有404，它不会触发load
事件。但很好，它现在可以工作：）谢谢@Pierre-这现在更有意义了，我现在看到的错误是找不到PhotoEditorSDK
（它们在index.html中加载），但我认为Angular 4要求以不同的方式加载-这将如何工作？如果您确定它们已加载，您需要添加一个声明常量PhotoEditorSDK:any我将更新我的答案。如果他们有打字机的话，那就最好了。对不起，是我的错，当我直接看的时候，我可以看到照片编辑器