Question

我是HTML，TypeScript和JavaScript的新手。我正在尝试从所选文件夹中获取相对路径。我正在使用来自this Stack post的代码。我添加了用于选择文件夹的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)（事件名称）在paranthesis）约定中调用组件function。

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

(change)="selectFolder($event)"

将TypeScript文件中的“函数”调用为HTML

1 个答案: