以角度导入文件时单击后退按钮

Question

角靴和弹簧靴都是新产品。我正在尝试开发一个导入函数，并开发了一个文本文件解析器。我有三个按钮：导入、上传和返回按钮。

单击"导入"按钮时，它将从本地导入文本文件。它将转到importFileChecker((来检查它是否是一个有效的txt文件，然后转到文本文件解析器函数(我将其命名为openFile(((。单击上载时，其端点将把文本文件内容保存到数据库中。然后，当单击"返回"时，它将返回主页，并允许您再次上传。

我的上传和导入工作正常。然而，我的问题是，每当我点击返回时，它都不会继续到我的importFileChecker((，就像在core.js等文件中的连续循环中一样，当我通过浏览器断点时。

我添加了控制台日志来监控流量。对于我的错误，任何帮助都将不胜感激。

场景：点击导入然后选择一个文件(正常和正确的流，这是上传之后(

onBtnImportClick starting                 (line 181)
reached end of line onBtnImportClick      (line 195)
importFileChecker is starting             (line 202)
process for txt file starting.            (line 720)

场景：单击导入->选择了一个文件->单击返回->再次单击"导入"->再次选择文件

onBtnImportClick starting                 (line 181)
reached end of line onBtnImportClick      (line 195)

什么都没有。设置断点和暂停，它在core.js和这样的上停止

这些是我的html和.ts:

上传文件test.html：

1. 我的导入按钮html：

<div class="col-md-2">
<input class="side-buttons" type="button" value="{{ 'Import' }}"
(click)="onBtnImportClick($event)">
<input class="hide-style" id="importData" type="file" (change)="importFileChecker($event)" />
</div>

上传文件测试组件.ts:

1. onBtnImportClick

public onBtnImportClick(event: any) {
console.log('onBtnImportClick starting');
event.preventDefault();
event.stopPropagation();
//some additional code for getting data
document.getElementById("importData").click();

console.log('reached end of line onBtnImportClick');
}

2. importFileChecker

public importFileChecker(event: any){
event.preventDefault();
event.stopPropagation();
console.log('importFileChecker is starting')
this.testFileName = event.target.files[0].name;
var fileName = event.target.files[0].name;
if(fileName.includes('.txt')){
this.openFile(event);
this.enableUploadButton = true;
} else {
//some error popup here
}
this.blocked=false;
}

3. 返回

back(){
this.goToUploadPage = false;
this.testFileName = '';

}

Answer 1

importFileChecker((方法由更改事件触发，如果多次选择同一个文件，则不会调用该方法。此文件存储在输入元素中。您必须清除back((方法中的输入元素。一种可能的方法是使用模板引用变量。

Html:

...
<input #inputRef class="hide-style" id="importData" type="file" (change)="importFileChecker($event)" />
...

组件：

...
@ViewChild("inputRef") inputRef: ElementRef;
...
back() {
this.goToUploadPage = false;
this.testFileName = "";
this.inputRef.nativeElement.value = "";
}