如何将 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/