Question

我需要从我在同一组件的构造函数中编写的Javascript调用我的Angular组件中声明的方法。我的目标是检测文件输入字段的更改并通过服务将文件上传到服务器。

我在导入后添加了此声明。

declare var $: any;

在我的构造函数中，我编写了以下代码。

$(document.body).on("change.bs.fileinput", ".fileinput-exists", function () {

    console.log($(this).parent().find('.myImage').val());
    let input = $(this).parent().find('.myImage');
    this._photoToBeSaved = input.prop('files')[0];
    console.log("my file = " + this._photoToBeSaved);
    //upload the image
    () => {
        this.uploadPhoto(this._photoToBeSaved);
    }
});

以下是同一组件中的uploadPhoto方法。

uploadPhoto(photo: any) {
    console.log("here i am at upload method);
    // call service method to upload
    .....
}

然而，这不起作用。

请注意，对于构造函数中的以下部分，我已经按照this问题的答案进行了操作。我能真的这样做吗？这是对的吗？

() => {
   this.uploadPhoto(this._photoToBeSaved);
}

uploadPhoto()方法未被调用。这是为什么？如何纠正这个？

Answer 1

找到解决方案。在此发布，以便它可以帮助有需要的人。

我不知道为什么我在问题中提出的方式不会调用Angular2组件中的方法。要采用的方法是 ARROW FUNCTIONS 。

$(document.body).on("change.bs.fileinput", ".fileinput-exists", (event: Event) => {
    alert("fired");
    let photoToSave = $(event.currentTarget).parent().find('.myImage').val();
    this.uploadPhoto(photoToSave);
});

uploadPhoto()方法现在被称为罚款。

Answer 2

所以你的目标是检测文件输入的变化并上传它！使用angularjs做它。要检测更改角度有两个内置函数： $scope.$watch ng-change。但是，您可以在此使用$scope.watch。

HTML：

 <input ng-model="value" type="file">

角

 //whenever input value will change will automatically updated here
  $scope.value = '';
 //and when $scope.value will change it will trigger this function
 $scope.$watch = function('value' function(){
     //upload code here
 });

从Javascript调用组件中的方法 - Angular2

2 个答案: