Angular 5 无法将 ImageCropperComponent 连接到其组件

Question

我安装了包"ngx-image-cropper" 我的项目结构如下

• 应用
• 应用程序 -> 页面
• 应用程序->页面->第1页->组件1
• 应用程序->页面->页面2->组件2

如果我将裁剪器连接到 Component1 那么一切正常 我将 ImageCropperComponent 组件导入 Page1.module.ts 但现在我需要在 Component2 裁剪器中工作。从Page1.module.ts中去掉import，我把它添加到上面的模块中，也就是Page.module.ts中。 我的应用程序不再看到他。

控制台日志

  Uncaught (in promise): Error: Template parse errors:
Can't bind to 'image' since it isn't a known property of 'img-cropper'.
1. If 'img-cropper' is an Angular component and it has 'image' input, then verify that it is part of this module.
2. If 'img-cropper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ex justify-content-center text-center"

我尝试在 App.module.ts 和 Page.module.ts 中安装 ImageCropperModule 没有结果，得到同样的错误。 如何为我的组件安装cropper？我的错误是什么？

我的 page.module.ts

 import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { PagesRoutingModule } from './pages-routing.module';
import { ThemeModule } from '../@theme/theme.module';
import { NewsModule} from './news/news.module';
import {ImageCropperComponent} from 'ngx-img-cropper';
const PAGES_COMPONENTS = [
  PagesComponent,
    ImageCropperComponent,
];

@NgModule({
  imports: [
    PagesRoutingModule,
    ThemeModule,
      NewsModule,
  ],
  declarations: [
    ...PAGES_COMPONENTS,
  ],
})
export class PagesModule {
}

我的component2.component.html（这个代码也用在其他组件中）

<img-cropper class="croppedBlock d-flex justify-content-center text-center"
                                     *ngIf="cropperVisible" [image]="data1" [settings]="cropperSettings1"
                                     (onCrop)="boundInfo($event)"></img-cropper>
                        <div class="resultCropper">
                      <span class=" imageCropper" *ngIf="data1.image">
                        <img *ngIf="savedImage" [src]="data1.image">
                            </span>
                            <button class="btn {{classButtonCropper}} d-block mb-2 mt-2 ml-auto mr-auto"
                                    (click)="cropped(bounds)" *ngIf="statusCropped" [innerHtml]="statusCropped">
                            </button>
                        </div>

决定 从父模块中移除 ImageCropperComponent 并将 ImageCropperModule 导入每个将使用它的父模块

Answer 1

这应该是这样的。

page.module.ts

import { NgModule } from '@angular/core';
import { PagesComponent } from './pages.component';
import { ImageCropperModule } from 'ngx-img-cropper';

const PAGES_COMPONENTS = [
  PagesComponent
];

@NgModule({
  imports: [
    ImageCropperModule
  ],
  declarations: [
    ...PAGES_COMPONENTS,
  ],
})
export class PagesModule {}

page.component.ts

import { CropperSettings } from 'ngx-img-cropper';

@Component({
    selector: 'page',
    encapsulation: ViewEncapsulation.Emulated,
    templateUrl: './page.component.html'
})
export class PageComponent {

    public data: any;
    public cropperSettings: CropperSettings;

    constructor() {

        this.cropperSettings = new CropperSettings();
        this.cropperSettings.width = 100;
        this.cropperSettings.height = 100;
        this.cropperSettings.croppedWidth = 100;
        this.cropperSettings.croppedHeight = 100;
        this.cropperSettings.canvasWidth = 400;
        this.cropperSettings.canvasHeight = 300;

        this.data = {};
    }
}

page.component.html

<img-cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>
<img [src]="data.image" [width]="cropperSettings.croppedWidth" [height]="cropperSettings.croppedHeight">