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

我需要从我在同一组件的构造函数中编写的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.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 an ng-change 。 但是你可以在这里使用$scope.watch 。

HTML：

角

  //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 });