将指令中的数据发送到angular4中的组件

问题描述：

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

问题是当组件中的方法被调用时'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); 


     }

组件中导入的模态服务。

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

感谢

答

所以这就是我所做的。加入输出的指令：

@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)">

这样的范围保持与部件

答

可以传递给指令之前bind上下文。

public ngOnInit(){ 
    this.imageDropCtrlFn = this.imageDropped.bind(this); 
}

现在你让imageDropCtrlFn回调到指令一样，

... 
[onImageDropCtrlFn]="imageDropCtrlFn" 
...

这将组件上下文绑定imageDropCtrlFn。

将指令中的数据发送到angular4中的组件

相关推荐