Angular 2 Material Progress Spinner : display as overlay

标签 angular angular-material

如何将 Angular 2 Material Progress Spinner 显示为当前 View (页面或模态对话框)的透明覆盖层?

最佳答案

我的灵感来自:Overriding Angular Material Size and Styling of md-dialog-container

我是这样解决的:

创建一个新组件

新建组件ProgressSpinnerDialogComponent

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

<mat-spinner></mat-spinner>

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 添加:

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

使用组件

这里是进度微调器的示例用法:

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from "@angular/material/dialog";
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 Material Progress Spinner : display as overlay,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42963444/

相关文章:

css - Angular Material 形式的填充高度

angular - 如何更改 Angular 5 Material 输入占位符?

angular - 门户主机不会在 Material 2 中渲染模板门户

Angular, Karma - 测试悬停

angular - 单击按钮 Angular 时如何更改组件

javascript - Gulp:如何使用 js 库的 CDN?

Angular Material UI TextArea 填充高度/宽度

testing - Ng 测试 - 无法绑定(bind)到 'value',因为它不是 'mat-select' 的已知属性

javascript - 如何从angular2中输入的文本动态设置超链接并使其可通过url点击?

javascript - 将 JSON 对象数组分配给 Angular/Typescript 接口(interface)数组