Angular新手：調試打字稿錯誤“'imageLoader'的所有聲明必須具有相同的類型參數”

Question

我粗略嘗試了一下Angular 2的一些基礎知識。 我了解到腳本標記只能在index.html中使用，所以我試圖將我的一個js文件轉換為app.component.ts組件類中的ts。 衷心感謝您能提供的任何幫助。

您能幫我理解和解決TS翻譯中的錯誤嗎？

這是原始的JavaScript：

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');


function handleImage(e) {
    var reader = new FileReader();
    reader.onload = function (event) {
        var img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

這是我當前的TypeScript，包括報告的錯誤：

app.component.html：

<div ng-controller="AppController">
    <label>Image File:</label><br/>
    <input type="file" id="imageLoader" name="imageLoader" />
    <canvas id="imageCanvas"></canvas>
</div>

Answer 1

這將是合適的angular 2版本：

import{ Component } from "@angular/core";

@Component({
selector: 'pc-app',

templateUrl: './app/app.component.html',
styleUrls: ['./app/app.component.css']

})

export class AppComponent {
    title: string = 'POSTERIZER';

    handleImage(e:any) {
        let imageLoader = document.getElementById('imageLoader');
        let canvas: any = document.getElementById('imageCanvas');
        let ctx = canvas.getContext('2d');
        var reader = new FileReader();
        reader.onload = function (event:any) {
            var img = new Image();
            img.onload = function () {
                canvas.setAttribute('width', '599');
                canvas.setAttribute('height', '599');
                ctx.drawImage(img, 0, 0);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }

}