將指令中的數據發送到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); 


     }

組件中導入的模態服務。

請指導。我想將此方法綁定到組件的範圍。

感謝

來源

2017-10-19 Shruti Nair

所以這就是我所做的。加入輸出的指令：

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

這樣的範圍保持與部件

來源

2017-10-19 10:37:33

可以傳遞給指令之前bind上下文。

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

現在你讓imageDropCtrlFn回調到指令一樣，

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

這將組件上下文綁定imageDropCtrlFn。

來源

2017-10-19 10:32:49 Thaadikkaaran

將指令中的數據發送到angular4中的組件

回答

相關問題