Question

我在组件中使用了一个指令。该指令通过回调将处理后的数据返回给组件。

问题是当组件中的方法被调用时'this'开始引用指令而不是组件。

我的组件是ImageFileReadDirective，它在abc组件中使用如此。

<input #imageInput type="file"
     accept="image/*,.MOV,.MPEG4,.MP4,.AVI,.WMV,.MPEGPS,.FLV,.3GPP,.WebM"
     appImageFileRead
     [onImageDropCtrlFn]="imageDropped"
     [resize_max_height]="300"
     [resize_max_width]="300"
     [resize_quality]="0.9"
     [resize_type]="image/png"
     [when_to_compress]="3"
     id="imageInput"
     class="button"/>

imageDropped方法位于使用此指令的组件中。

 imageDropped(fileDetails: any) {
            **//REFERS TO DIRECTIVE SCOPE**
            var self = this;
   **//THIS BECOMES UNDEFINED**  
   this.modalService.setImage(fileDetails.fileDetails.base64FileData);


        }

在组件中导入的模态服务。

请指导。我想将此方法绑定到组件的范围。

由于

Answer 1

所以这就是我所做的。在指令中添加了一个输出：

 @Output() private filesUploadedEmiter: EventEmitter<File[]> = new EventEmitter();

并在组件中的指令调用中：

<div  class="form-group text-area"
   id="file-drop"
   appImageFileRead
   [resize_max_height]="300"
   [resize_max_width]="300"
   [resize_quality]="0.9"
   [resize_type]="image/png"
   [when_to_compress]="3"
   (filesChangeEmiter)="imageDropped($event)">

通过这种方式，范围保留在组件

中

Answer 2

在传递给指令之前，您可以<?xml version="1.0" encoding="UTF-8" standalone="no"?><service> <Ms> <ross> <details> <start> 2017-09-07 </start> <startDate> 2017-02-02 </startDate> <endDate> 2017-03-02 </endDate> <runAs> true </runAs> <makeVersion> 1 </makeVersion> <patch> this is patch </patch> <parameter> 1 </parameter> </details> </ross> </Ms> </service>上下文。

bind

现在，您将public ngOnInit(){ this.imageDropCtrlFn = this.imageDropped.bind(this); }作为回调指令，如

imageDropCtrlFn

这会将组件上下文与... [onImageDropCtrlFn]="imageDropCtrlFn" ...绑定。

将数据从指令发送到angular4

2 个答案: