Question

我正在尝试将外部库（Javascript）加载到Angular2组件（TypeScript）。

举例：https://github.com/fengyuanchen/cropperjs

我的方法：

的index.html

<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
</head>

myCropper.js

window.addEventListener('DOMContentLoaded', function () {
 var image = document.querySelector('#image');
 var cropper = new Cropper(image, {
    viewMode: 3,
    dragMode: 'move',
    autoCropArea: 1,
    restore: false,
    modal: false,
    guides: false,
    highlight: false,
    cropBoxMovable: false,
    cropBoxResizable: false,
    toggleDragModeOnDblclick: false,
  });
 });

photo.component.ts

@Component({
selector: 'photo-crop',
template: `
    <div class="row">
      <img id="image" src="http://img01.ibnlive.in/ibnlive/uploads/875x584/jpg/2015/09/new-google-logo-010915.png" class="img-responsive"/>
    <div class="row">
    `,
styles: []
})
export class PhotoComponent {

public ngOnInit() {
    this.loadScript('src/assets/js/myCropper.js');           
    });
}

public loadScript(url) {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = url;
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);
 }
}

问题：图像加载时没有缩放/裁剪效果。我检查了页面，看到脚本已正确添加。我刷新了页面，没有运气。我没有任何错误。似乎Angular2没有激活脚本。

我还尝试了一种解决方法：直接在index.html中放入脚本（此解决方法在页面未加载时返回错误）

<head>
  ...
  <script src="src/assets/js/myCropper.js"></script>
</head>

照片加载时没有缩放/裁剪效果。但刷新页面后，会激活缩放/裁剪效果。这不是一个好的做法，所有脚本都保存在index.html中，但至少脚本在刷新后工作。

任何建议都表示赞赏。

动态地将外部javascript加载到组件

0 个答案: