在 angular 中导入文件时单击后退按钮

Question

angular 和 spring 引导相当新。我正在尝试开发一个导入功能并开发了一个文本文件解析器。我有三个按钮：导入、上传和返回按钮。

点击导入按钮时，会从本地导入文本文件。它将转到 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:

我的导入按钮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>

上传文件-test.component.ts:

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');
  }

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;
  }

返回

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

Answer 1

importFileChecker() 方法由更改事件触发，如果您多次 select 同一个文件，则不会调用该方法。该文件存储在输入元素中。您必须清除 back() 方法中的输入元素。一种可能的方法是使用 template reference variable.

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 = "";
}

在 angular 中导入文件时单击后退按钮

Clicking back button when importing a file in angular

html

javascript

frontend

typescript

angular