Javascript - TypeScriptファイル内に記述したJavaScriptが正しく機能しないのはなぜですか？

Question

私が作成したイオンのプロジェクトを持っています。イオンプロジェクトのスクリプトの中にJavaScriptコードを追加しましたが、機能が動作していないことがわかりました。私problem.tsファイル内

</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> 

problem.html

：

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は（）と呼ばれていますか？おそらく、有効なウィンドウオブジェクトを最初に（たとえば、コンポーネントまたはサービス内で）保持し、このメソッドに渡します。そして、あなたのコードを変更して、 "onload"関数をAngular/Ionicコンポーネントのライフサイクルメソッドの1つで呼び出すことをお勧めします。あなたのコードがどのように見えるかは、Angular/Ionicアプリで動くかどうかは疑問です。