想說會不會又是專案還在 angular 8 的坑…
但是都用官網範例，
我只有新增一個啟動切換元件的按鈕
complied正常
但是網頁跳錯
想問問有用過的高手
是我哪邊沒弄對嗎
app.module.ts
import { ImageCropperModule } from 'ngx-image-cropper';
@NgModule({
declarations: [
TestCropperComponent,
],
imports: [
ImageCropperModule,
],
啟動component.html 和 ts
<button
mat-raised-button
(click)="opentest()"
>
testCropper
</button>
opentest() {
this.router.navigate(['/testcropper']);
}
routing.ts
{ path: 'testcropper', component: TestCropperComponent },
cropper.ts 和html
<div class="">
<input type="file" (change)="fileChangeEvent($event)" />
<image-cropper
[imageChangedEvent]="imageChangedEvent"
[maintainAspectRatio]="true"
[aspectRatio]="4 / 3"
format="png"
(imageCropped)="imageCropped($event)"
(imageLoaded)="imageLoaded()"
(cropperReady)="cropperReady()"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
<img [src]="croppedImage" />
</div>
imageChangedEvent: any = '';
croppedImage: any = '';
constructor() {}
ngOnInit() {}
fileChangeEvent(event: any): void {
this.imageChangedEvent = event;
}
imageCropped(event: ImageCroppedEvent) {
this.croppedImage = event.base64;
}
imageLoaded(image: LoadedImage) {
// show cropper
}
cropperReady() {
// cropper ready
}
loadImageFailed() {
// show message
}
"dependencies": {
"@angular/animations": "^8.2.14",
"@angular/cdk": "^8.1.4",
"@angular/common": "^8.2.14",
"@angular/compiler": "^8.2.14",
"@angular/core": "^8.2.14",
"@angular/flex-layout": "^8.0.0-beta.27",
"@angular/forms": "^8.2.14",
"@angular/material": "^8.2.3",
"@angular/material-moment-adapter": "^9.1.2",
"@angular/platform-browser": "^8.2.14",
"@angular/platform-browser-dynamic": "^8.2.14",
"@angular/router": "^8.2.14",
"@auth0/angular-jwt": "^3.0.1",
"hammerjs": "^2.0.8",
"moment": "^2.24.0",
"ngx-image-cropper": "^4.0.0",
"npm": "^6.9.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.803.21",
"@angular/cli": "^8.2.2",
"@angular/compiler-cli": "^8.2.14",
"@angular/language-service": "^8.2.14",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "^2.0.8",
"@types/node": "~8.9.4",
"codelyzer": "^5.2.1",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.5.1",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
