在angular4中将数据从指令发送到组件答案

【问题标题】：sending data from directive to component in angular4在angular4中将数据从指令发送到组件
【发布时间】：2018-03-31 08:12:03
【问题描述】：

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

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


        }

在组件中导入模态服务。

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

谢谢

【问题讨论】：

标签： angular scope components directive

【解决方案1】：

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

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

现在你将imageDropCtrlFn 设置为对指令的回调，例如，

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

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

【讨论】：

【解决方案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)">

通过这种方式，范围与组件保持一致

【讨论】：