风一更--软件开发--UI--Angular material overlay prgress bar

目的：掌握 UI overlay 遮罩 和 进度指示器

---

1. thansk for references

1>https://blog.csdn.net/moqiuqin/article/details/118737425 （三种方式）

2> https://my.oschina.net/worktile/blog/3061427

3> https://blog.csdn.net/wuyuxing24/article/details/85011551

 

 

protal

1. https://www.jianshu.com/p/dc21f1537879 

---

1. data analysis platform 示例：

upload file 页面的submit 后触发 弹出进度遮罩

引入依赖 module

页面配置

component.ts 定义组件，注入依赖.

submit() 方法触发 overlay, 在 处理成功后，dispost()

构建 overlay 及其内容 进度条

  submit() 触发

手动关闭 overlay

 代码：

1.module

@NgModule({
  declarations: [
       UploadAquaEdgeRegPerformComponent,
       ConfigAquaEdgeRegPerformComponent,
       ReportAquaEdgeRegPerformComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    FlexLayoutModule,
    MatFormFieldModule,
    FormsModule,
    RouterModule,
    MatButtonModule,
    MatIconModule,
    MatDividerModule,
    MatInputModule,
    MatGridListModule,
    MatTableModule,
    MatPaginatorModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule,
    DragDropModule,
    MatToolbarModule,
    MatListModule,
    MatOptionModule,
    HighchartsChartModule,
    CoreAquaEdgeRegPerformModule,
    ModelAquaEdgeRegPerformModule,
    WidgetModule,

    OverlayModule,
    PortalModule,
    MatProgressSpinnerModule
  ]
})
export class AquaEdgeModule { }

2. component.ts

import {Component, ElementRef, TemplateRef, ViewChild, ViewContainerRef} from '@angular/core';
import {UploadAquaEdgeRegPerform} from "../../model/upload-aqua-edge-reg-perform/upload-aqua-edge-reg-perform.model";
import {ActivatedRoute, Router} from "@angular/router";
import {UploadAquaEdgeRegPerformRest} from "../../model/upload-aqua-edge-reg-perform/upload-aqua-edge-reg-perform.rest";
import {NgForm} from "@angular/forms";
import {CdkOverlayOrigin, Overlay, OverlayConfig, OverlayRef} from "@angular/cdk/overlay";
import {ComponentPortal, TemplatePortal} from "@angular/cdk/portal";

@Component({
  selector: 'app-upload-aqua-edge-reg-perform',
  templateUrl: './upload-aqua-edge-reg-perform.component.html',
  styleUrls: ['./upload-aqua-edge-reg-perform.component.css']
})
export class UploadAquaEdgeRegPerformComponent {

  upload:UploadAquaEdgeRegPerform = new UploadAquaEdgeRegPerform(null,null,null);

  //-- overlay --//
  // @ts-ignore
  overlayRefUp:OverlayRef = null;
  // @ts-ignore
  @ViewChild(CdkOverlayOrigin,{static:false}) _overlayOrigin: CdkOverlayOrigin;
  // @ts-ignore
  @ViewChild("overlayUp",{static: false}) templatePortal: TemplatePortal;

  constructor(activatedRoute:ActivatedRoute,
              private uploadRest:UploadAquaEdgeRegPerformRest,
              private router: Router,
              private overlay:Overlay){
    activatedRoute.params.subscribe(param=>{
      this.upload.process = param["process"];
    })
  }

  attachment(e:any,role:string):void{
    if(role === "groundTruth"){
      this.upload.groundTruth = e.target.files[0];
    }

    if(role == "validation"){
      this.upload.validation = e.target.files[0];
    }
  }

  submitForm(form:NgForm){
    this.openOverlay();

    this.uploadRest.uploadAttachment(this.upload)
      .subscribe(res=>this.handleResponse(res))
  }

  private handleResponse(response:any){
    if(response.statusCode ==="NORMAL"){
      this.transferToConfig(response);
      return;
    }
    this.handleMessage(response);
  }

  private transferToConfig(response:any){
    const data = {
      data:JSON.stringify(response.data)
    };
    this.router.navigate(["/aqua-edge-regression-performance-config", data]);
  }

  private handleMessage(response:any){
    alert("error, " + response.statusCode);
  }

  openOverlay(){
    const config = new OverlayConfig();
    config.positionStrategy = this.overlay.position()
      .global().centerHorizontally().centerVertically();
    config.disposeOnNavigation= true;
    config.hasBackdrop = true;

    this.overlayRefUp = this.overlay.create(config);
    this.overlayRefUp.attach(this.templatePortal);
  }
}

3.html

<!-- Toolbar-->
<header>
  <nav>
    <mat-toolbar color="primary">
      <button mat-icon-button class="app-icon" aria-label="app icon-button with menu  icon">
        <mat-icon>menu</mat-icon>
      </button>
      <span>Data process & analysis platform</span>
      <span class="app-spacer"></span>
      <button mat-icon-button class="app-icon home-icon" aria-label="app icon-button with  home icon"  routerLink="">
        <mat-icon aria-hidden="false" aria-label="app home icon" fontIcon="home">Home</mat-icon>
      </button>
      <button mat-icon-button class="app-icon" aria-label="app icon-button with share  icon">
        <mat-icon>share</mat-icon>
      </button>
    </mat-toolbar>
  </nav>
</header>

<!-- overlay progress bar -->
<ng-template cdk-portal #overlayUp="cdkPortal">
  <mat-spinner color="accent"></mat-spinner>
</ng-template>

<main class="wrapper">
  <form #form="ngForm" novalidate enctype="multipart/form-data" (ngSubmit)="submitForm(form)">

    <div class="fieldset-wrapper">
      <fieldset>
        <legend>Upload attachment.</legend>
        <p class="field field-file">
          <label for="upload-groundTruth">ground truth:</label>
          <input mat-stroked-button color="primary" name="groundTruth" id="upload-groundTruth" type="file"  (change)="attachment($event,'groundTruth')"/>
        </p>
        <p class="field field-file">
          <label for="upload-validation">validation:</label>
          <input mat-stroked-button color="accent" name="validation" id="upload-validation" type="file" (change)="attachment($event,'validation')"/>
        </p>
      </fieldset>
      <div class="form-button-row">
        <button mat-raised-button class="btn_reset" color="warn" type="reset">reset</button>

        <button mat-raised-button class="btn_submit" color="primary" type="submit"
                CdkOverlayOrigin
                [disabled]="overlayRefUp">
          submit
        </button>

      </div>
    </div>
  </form>
</main>

 

---

 实例2 失败 曲线解决

场景说明：在点击 export 后，在按钮右侧出现 progress  bar, 

不采用全屏遮罩，是因为页面下方有 统计表格，该视图与excel导出不耦合不串行.

 

问题： 页面上以 export button 为 origin 锚点. 使用 FlexibleConnectedTo ( ) 及其配置，不使用全屏遮罩 block.

 

后续再尝试.

---