javascript - 将 TypeScript 文件内的 "function"调用为 HTML

Question

我对 HTML、TypeScript 和 JavaScript 还很陌生。我目前正在尝试从选定的文件夹获取相对路径。我正在使用 this 中的代码堆栈帖子。我已经添加了用于选择文件夹的 HTML，但我在使用 JavaScript 部分时遇到了问题。这是一个 Angular 2 应用程序，所以我有一个 TypeScript 文件。我在下面添加了我的代码以及后面的 JSFiddle 链接。

这是我的 HTML:

<div class="panel panel-primary" style="border-color: #464646;">
    <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; padding-top: 3px;">
        <div style="float: left; margin-top: 5px;">Select directory</div>
    </div>
    <div class="panel-body">
        <!--Directory Selection Button-->
        <div class="row">
            <input type="file" id="FileUpload" onchange="selectFolder(event)" webkitdirectory mozdirectory msdirectory odirectory directory multiple />
        </div>
    </div>
</div>

这是我的 TypeScript 文件:

import {Component} from '@angular/core';
import {HttpModule} from "@angular/http";

@Component({
    selector: 'home',
    templateUrl: './SDI/templates/home.html',
})
export class HomeComponent {

    constructor(){ }

    selectFolder(e: any) {
        console.log('selectFolder entered.'); 

        var theFiles = e.target.files;
        var relativePath = theFiles[0].webkitRelativePath;
        var folder = relativePath.split("/");
        alert(folder[0]);
    }
}

JSFiddle 链接:https://jsfiddle.net/roka545/9ufc5nsg/

但是，当我运行应用程序并选择一个文件夹时，我的控制台告诉我

selectFolder is not defined.

我究竟做错了什么？

Answer 1

您应该使用 (change) 而不是 onchange 属性。基本上，onchange 事件在全局 javascript scope(上下文)中查找函数，而当您想调用与模板关联的 Component 方法时，您必须遵循(eventName)(括号中的事件名称)约定来调用组件function。

此外，在将参数传递给函数时，请使用 $event 而不是 event。

(change)="selectFolder($event)"