Angular 2材质进度微调器:显示为覆盖图 [英] Angular 2 Material Progress Spinner: display as overlay

问题描述

如何将Angular 2材质进度微调器显示为当前视图(页面或模式对话框)的某种程度透明的覆盖层?

How to display the Angular 2 Material Progress Spinner as a somewhat transparent overlay of the current view (a page or a modal dialog)?

推荐答案

我的灵感来自于:我这样解决了:

创建一个新组件ProgressSpinnerDialogComponent

Create a new component ProgressSpinnerDialogComponent

progress-spinner-dialog.component.html的内容:

The content of progress-spinner-dialog.component.html:

<mat-spinner></mat-spinner>

progress-spinner-dialog.component.ts的内容:

The content of progress-spinner-dialog.component.ts:

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

@Component({
  selector: 'app-progress-spinner-dialog',
  templateUrl: './progress-spinner-dialog.component.html',
  styleUrls: ['./progress-spinner-dialog.component.css']
})
export class ProgressSpinnerDialogComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

添加样式

在styles.css中添加:

Add a Style

In styles.css add:

.transparent .mat-dialog-container {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.0);
}

使用组件

下面是进度微调器的用法示例:

Use the Component

Here an example usage of the progress spinner:

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from "@angular/material";
import { Observable } from "rxjs";
import { ProgressSpinnerDialogComponent } from "/path/to/progress-spinner-dialog.component";

@Component({
  selector: 'app-use-progress-spinner-component',
  templateUrl: './use-progress-spinner-component.html',
  styleUrls: ['./use-progress-spinner-component.css']
})
export class UseProgressSpinnerComponent implements OnInit {

  constructor(
    private dialog: MatDialog
  ) {
    let observable = new Observable(this.myObservable);
    this.showProgressSpinnerUntilExecuted(observable);
  }

  ngOnInit() {
  }

  myObservable(observer) {
    setTimeout(() => {
      observer.next("done waiting for 5 sec");
      observer.complete();
    }, 5000);
  }

  showProgressSpinnerUntilExecuted(observable: Observable<Object>) {
    let dialogRef: MatDialogRef<ProgressSpinnerDialogComponent> = this.dialog.open(ProgressSpinnerDialogComponent, {
      panelClass: 'transparent',
      disableClose: true
    });
    let subscription = observable.subscribe(
      (response: any) => {
        subscription.unsubscribe();
        //handle response
        console.log(response);
        dialogRef.close();
      },
      (error) => {
        subscription.unsubscribe();
        //handle error
        dialogRef.close();
      }
    );
  }
}

将其添加到app.module

 declarations: [...,ProgressSpinnerDialogComponent,...],
 entryComponents: [ProgressSpinnerDialogComponent],

这篇关于Angular 2材质进度微调器:显示为覆盖图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！