Angular 2 Material Progress Spinner:显示为叠加 [英] Angular 2 Material Progress Spinner: display as overlay
本文介绍了Angular 2 Material Progress Spinner:显示为叠加的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将 Angular 2 Material Progress Spinner 显示为当前视图(页面或模式对话框)的透明叠加层?
How to display the Angular 2 Material Progress Spinner as a somewhat transparent overlay of the current view (a page or a modal dialog)?
推荐答案
我的灵感来自:覆盖 md-dialog-container 的 Angular Material 大小和样式
我是这样解决的:
新建一个组件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 Material Progress Spinner:显示为叠加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文