Cropperjs 不能在 Angular 2 中工作答案

【问题标题】：Cropperjs not working in angular 2Cropperjs 不能在 Angular 2 中工作
【发布时间】：2016-10-08 22:00:20
【问题描述】：

我正在尝试在 Angular 项目中使用cropperjs 库。文档中的cropper 示例在普通静态网页上运行良好（简单的index.html 带有<script> js 标记和cropper.css 文件的链接）。

但由于某种原因，这不起作用。 Cropper 似乎已加载（console.log(Cropper) 执行该功能），并且有一些功能，但看起来缺少样式。

cropper.component.ts

import {Component} from "@angular/core";

var foo = require('cropperjs/dist/cropper');


@Component({
  selector: "cropper",
  template: `
    <div>
      <img id="image" src="https://dl.dropboxusercontent.com/s/vyeh3vqc93hbye4/Capture%20d%27%C3%A9cran%202016-05-27%2017.14.53.png?dl=0">
    </div>
  `,
  styleUrls: ['../styles/cropper.css', '../styles/cropper.component.css']
})
export class CropperComponent implements OnInit{
  ngOnInit(){
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 16 / 9,
      crop: function(e) {
        console.log(e.detail.x);
        console.log(e.detail.y);
        console.log(e.detail.width);
        console.log(e.detail.height);
        console.log(e.detail.rotate);
        console.log(e.detail.scaleX);
        console.log(e.detail.scaleY);
      },
    });
  }
}

【问题讨论】：

标签： angular typescript external-dependencies

【解决方案1】：

在开发者工具中，cropper.js 添加的标签没有添加 Angular 用于样式的自定义属性（看起来像 _ngcontent-xpk-4 的那些），所以cropperjs 样式不起作用。

只需在 index.html 中添加cropper.css (<link rel="stylesheet" href=".../cropper.css">) 而不是在组件中引用它即可解决。

【讨论】：