Angular 2，自定义控件永远不会被标记为脏

我创建了一个自定义控件，我以编程方式提供值，因为它是一个基于cropper.js的图像编辑器，用户通过正常的fileinput“上传”图像，而我然后使用File API将图像分配给我的自定义控件。Angular 2，自定义控件永远不会被标记为脏

这里的代码（我删除了一些cropper.js的可读性特定代码）

import { 
    Component, 
    OnInit, 
    ViewChild, 
    ElementRef, 
    ViewEncapsulation, 
    forwardRef 
} from '@angular/core'; 

import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 
import * as Cropper from 'cropperjs'; 
import { Photo } from '../entities/photo'; 

@Component({ 
    selector: 'image-edit', 
    templateUrl: 'image-edit.component.html', 
    styleUrls: [ 
     'image-edit.component.scss', 
     '../../../node_modules/cropperjs/dist/cropper.min.css' 
], 
encapsulation: ViewEncapsulation.None, 
providers: [ 
    { 
     provide: NG_VALUE_ACCESSOR, 
     useExisting: forwardRef(() => ImageEditComponent), 
     multi: true 
    } 
    ] 
}) 

export class ImageEditComponent implements OnInit, ControlValueAccessor { 

    get value() { 
     return this.cropperImage.nativeElement.src; 
    } 

    set value(v: string) { 
     this.cropperImage.nativeElement.src = v; 
    } 

    public onTouch:() => void; 
    public onChange: (_: any) => void; 

    @ViewChild('cropperImage') 
    private cropperImage: ElementRef; 

    private isDisabled: boolean; 

    // cropper.js 
    private cropper: Cropper; 
    private cropperOptions: Cropper.CropperOptions = {}; 

    public ngOnInit(): void { 

     // init cropper.js 
    } 

    public writeValue(obj: any): void { 

     if (obj) { 
      this.value = obj; 
      this.initializeCropperOrReplaceImage(); 
     } 
    } 

    public registerOnChange(fn: any): void { 
     this.onChange = fn; 
    } 

    public registerOnTouched(fn: any): void { 
     this.onTouch = fn; 
    } 

    public setDisabledState(isDisabled: boolean): void { 
     this.isDisabled = isDisabled; 
    } 

    private initializeCropperOrReplaceImage(): void { 

     if (!this.isCropperInitialized) { 
      this.cropper = new Cropper(this.cropperImage.nativeElement, this.cropperOptions); 
      this.isCropperInitialized = true; 
     } 
     else { 
      this.cropper.replace(this.cropperImage.nativeElement.src); 
     } 

     URL.revokeObjectURL(this.cropperImage.nativeElement.src); 
    } 
}

这里的模板

<image-edit [hidden]="!photo.data" #photoData="ngModel" name="photoData" [(ngModel)]="photo.data" validateMinImageDimensions minWidth="300" minHeight="400"> 
</image-edit>

不幸的是我的控制从来都不是脏或感动。我试图扩展AbstractForm并设置自己的脏，但它没有工作。它保持不污染和未受影响。

任何想法我做错了什么？

编辑

我因为根据@在writeValue删除调用onTouch和onChange n00dl3答案和注释（见那里）它不是一个很好的解决方案。

来源

2017-04-05 Arikael

请添加您的组件模板。 – n00dl3

你永远不会调用this.onTouch()在您的组件，让你的输入不能被标记为感动既不脏....

来源

2017-04-05 07:40:45 n00dl3

就是这样，我需要在'writeValue'中调用'onTouch（）'和'onChange（obj）'。我用代码 – Arikael

更新了问题，在'writeValue'中使用它们是没有意义的，'当模型更新视图时调用writeValue'，当裁剪图像时应该调用这些回调函数。 – n00dl3

感谢您的额外的输入，我会看看它 – Arikael

Angular 2，自定义控件永远不会被标记为脏

回答

相关问题