Cropperjs不能在角2中工作

我想在Angular項目中使用cropperjs庫。文檔中的cropper示例在正常的靜態網頁上工作正常（簡單的index.html，js的<script>標籤和一個到cropper.css文件的鏈接）。Cropperjs不能在角2中工作

但由於某種原因，這是行不通的。裁剪似乎加載（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); 
     }, 
    }); 
    } 
}

來源

2016-09-29 maxbellec

展望開發工具，通過cropper.js添加的標籤沒有添加自定義屬性的造型角用途（看起來像_ngcontent-xpk-4的那些），所以cropperjs造型沒有工作。

只需在index.html中添加cropper.css（<link rel="stylesheet" href=".../cropper.css">），而不是在組件中引用它即可解決它。

來源

2016-09-29 15:23:28 maxbellec

Cropperjs不能在角2中工作

回答

相關問題