AngularJS PrimeNG 上传文件 进度条
1.思路：2.父页面代码实现：3.子页面代码实现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>
ts
import {Component, OnInit, Input } from '@angular/core';@Component({selector: 'app-xxx-progressbar',templateUrl: './xxx-ponent.html',styleUrls: ['./xxx-ponent.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;}}
