Javascript - 为什么我在 TypeScript 文件中编写的 JavaScript 无法正常运行？

Question

我创建了一个离子项目。我在ionic项目的type脚本里面添加了JavaScript代码，但是发现这个函数不起作用。

problem.html

  </ion-col>
  <ion-col col-7 style="text-align:center;">
    <div class="center-block">
      <!--<input type="file" id="view" accept="image/*" multiple="multiple">-->
      <!--<input type="file" accept="image/*" multiple="multiple" onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">-->
      <article>
        <input id="files" type="file" accept="image/*" multiple/>
        <button ion-button (click)="imageUpload()"> Here ! </button>
      </article>
    </div>
  </ion-col>

 <p style="text-align:center;">
    <output id="result">
      <div>
      </div>
    </output>

在我的问题.ts 文件中：

imageUpload(){

  window.onload = function () {
console.log("hihi");
    //Check File API support zzzz
    (<any>$('#files')).live("change", function (event) {
      var files = event.target.files; //FileList object
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        //Only pics
        // if(!file.type.match('image'))
        if (file.type.match('image.*')) {
          if (this.files[0].size < 2097152) {
            // continue;
            var picReader = new FileReader();
            picReader.addEventListener("load", function (event) {
              var picFile = <FileReader>event.target;
              var div = document.createElement("div");
              div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
                "title='preview image'>";
              output.insertBefore(div, null);
            });
            //Read the image
            $('#clear, #result').show();
            picReader.readAsDataURL(file);
          } else {
            alert("Image Size is too big. Minimum size is 2MB.");
            $(this).val("");
          }
        } else {
          alert("You can only upload image file.");
          $(this).val("");
        }
      }
    });
    (<any>$('#files')).live("click", function () {
      $('.thumbnail').parent().remove();
      $('result').hide();
      $(this).val("");
    });

    (<any>$('#clear')).live("click", function () {
      $('.thumbnail').parent().remove();
      $('#result').hide();
      $('#files').val("");
      $(this).hide();
    });

  }
}

这是我所有的代码。在我实现它之后，没有返回任何错误，但我发现我的 JavaScript，特别是 imageUpload() 函数，不起作用。我console.log 我的控制台没有返回任何内容。

有人知道问题出在哪里吗？谢谢。

Answer 1

要检查的显而易见的事情是，调用此方法时是否有有效的窗口对象？曾经调用过 window.onLoad() 吗？我不记得曾经在离子应用程序中使用过 window.onLoad()。

这个方法 imageUpload() 在哪里调用？我可能会首先获取一个有效的窗口对象（例如，在组件或服务中），然后将它传递给这个方法。而且，我建议更改您的代码，以便在 Angular/Ionic 组件生命周期方法之一中调用您的“onload”函数。从您的代码的外观来看，我怀疑它是否会在 Angular/Ionic 应用程序中运行。