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

Question

我在组件中使用了一个指令。指令 returns 通过回调将数据处理回组件。

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

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

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

现在您将 imageDropCtrlFn 作为指令的回调，例如

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

这会将组件上下文与 imageDropCtrlFn 绑定。

Answer 2

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

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

这样，作用域就保留在组件中了

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

sending data from directive to component in angular4

angular

scope

components

directive