Question

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

应用
App - ＆gt;页
App - ＆gt;页面 - ＆gt;第1页 - ＆gt; COMPONENT1
App - ＆gt;页面 - ＆gt;第2页 - ＆gt; COMPONENT2

如果我将裁剪器连接到 Component1 ，那么一切正常我将ImageCropperComponent组件导入 Page1.module.ts 但现在我需要在 Component2 裁剪器中工作。从Page1.module.ts中删除导入，我将其添加到上面的模块中，即在 Page.module.ts 中。我的应用程序停止看到他。

CONSOLE.LOG

  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而没有结果，得到相同的错误。如何为我的组件安装裁剪器？我的错是什么？

我的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">

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

1 个答案: