我正在尝试将外部库（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 angular typescript