AngularJS PrimeNG 上传文件进度条

本文链接：https://blog.csdn.net/weixin_41175971/article/details/82986384

本文介绍了如何在AngularJS中使用PrimeNG的p-progressBar组件创建一个文件上传进度条。当文件上传达到100%时，进度条自动隐藏。详细步骤包括：1. 使用AngularJS生成新组件并挂载到父页面；2. 父页面通过viewChild调用子页面方法设置标题和标签；3. 子页面HTML和TS代码展示。由于文件通常秒传，添加了延迟关闭功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.思路：

使用p-progressBar，创建一个新画面，浮在p-fileUpload组件所在页面上方。当文件上传进度达到100%时，隐藏该新页面。
在这里插入图片描述

2.父页面代码实现：

使用AngularJS命令生成新的component：ng g c xxxx。如果项目有特别设置，修改xxx.module.ts文件。
在父组件中挂载子页面。
其中，progressbarValue是p-fileUpload组件的onProgress($event)中的event.progress传过来的0-100的整型。
html

      <p-fileUpload chooseLabel="xxx" mode="basic" accept=".xxx" maxFileSize="1000000"
        (onSelect)="onSelect($event)" auto="false" (onProgress)="onProgress($event)"></p-fileUpload>
        ...
        ...
<xxx-progressbar #progressBar [progressbarValue]="progressbarValue"></xxx-progressbar>

ts代码中，通过viewChild，调用子页面的public方法，写入title和label，如开头的图片所示。
因为项目中该页面上传文件基本都是秒传，所以加了延迟关闭。

export class xxxComponent extends ContentsBaseViewHelper implements OnInit {
  @ViewChild('progressBar') progressBar;
  ...
  ...
  ...
  ...
  /**
   * @param event
   */
  public onProgress(event: any) {
    this.progressbarValue = event.progress;
    const title = 'xxx';
    const label = 'xxx';
    this.progressBar.show(title, label + event.progress + '%');
    if (event.progress === 100) {
      setTimeout(() => {
        this.progressBar.close();
      }, 500);
    }
  }
}

3.子页面代码实现

子页面直接看代码：
html

<p-dialog [closeOnEscape]="false" [draggable]="false" [closable]="false" [(visible)]="isDisplay" [modal]="true" [resizable]="false"
  appendTo="body">
  <p-header>
    <div class="title">
      <span>{{progressbarTitle}}</span>
    </div>
  </p-header>
  <div class="dialog-content">
    <div class="progress-area">
      <p-progressBar  [value]="progressbarValue" [showValue]="false" ></p-progressBar>
    </div>
    <div class="progress-label">{{progressbarLabel}}</div>
  </div>
</p-dialog>

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-xxx-progressbar',
  templateUrl: './xxx-progressbar.component.html',
  styleUrls: ['./xxx-progressbar.component.css']
})
export class xxxProgressbarComponent implements OnInit {
  // 
  @Input() progressbarValue: number;
  //
  public isDisplay = false;
  // 
  public progressbarTitle: string;
  // 
  public progressbarLabel: string;

  /**
   * 
   */
  constructor() { }

  /**
   * 
   */
  ngOnInit() {
  }

  /**
   * 
   * @param title 
   * @param label
   */
  public show(title: string, label: string) {
    this.progressbarTitle = title;
    this.progressbarLabel = label;
    this.isDisplay = true;
  }

  /**
   *
   */
  public close() {
    this.isDisplay = false;
  }
}