如何在文件上传之前显示加载器？角 2答案

【问题标题】：How to show loader until file uploads? Angular 2如何在文件上传之前显示加载器？角 2
【发布时间】：2017-07-07 22:18:43
【问题描述】：

我想在上传文件时添加加载器图标。如何将其设置为持续到上传完成？

我有一个简单的上传表单，我想在其中上传文档并单击“保存”按钮，然后加载程序应该会弹出并仅在文件上传之前显示。

<input type="file" (change)="AddFiles($event)" />
<button type="submit">Save</button>

TS：

addFiles(event: EventTarget) {
    // this.file = [];
    const eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    const target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    const files: FileList = target.files;
    if (files.length !== 0) {
      this.file = [];
      this.file.push(files[0]);
      this.uploadFlag = true;
    } else {
      this.uploadFlag = false;
    }

  }

这就是添加文件的代码，我想要做的是点击 Save show loader 直到它完成。

【问题讨论】：

你试过什么？你的代码是如何组织的，你想在哪里/如何实现它？请查看stackoverflow.com/help/how-to-ask 并更新您的问题。
@JoshuaOhana 解释得更好
保存按钮的onclick方法在哪里？假设您在某处进行 http 调用，只需在启动时设置标志，并在收到响应时取消设置。至于 UI 位，有大量 Angular 加载器可供使用，Angular 材质有一个很好看的

标签： angular

【解决方案1】：

你可以这样做：

<div align="center" *ngIf="result?.length == 0">Waiting ...</div>
  <div id="loader-home" align="center" *ngIf="result?.length == 0">
    <div class="bounce1"></div>
    <div class="bounce2"></div>
    <div class="bounce3"></div>
  </div>

每个反弹类代表一个气泡（用css调整为一个接一个反弹）

    /* LOADER */
  #loader-home {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; }
  #loader-home > div {
    width: 18px;
    height: 18px;
    background-color: black;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
  #loader-home .bounce1 {
    animation-delay: -0.32s; }
  #loader-home .bounce2 {
    animation-delay: -0.16s; }
  #loader-home .bounce3 {
    animation-delay: -0.08s; }

“结果”变量是你的 observable 的结果

 this.data.import(uploadResult)
        .map((res: any) => res.errorMessage)
        .subscribe(result => {
        this.result = result;
...}

【讨论】：