Angular 角度2材质进度微调器：显示为覆盖

如何将Angular 2 Material Progress微调器显示为当前视图（页面或模式对话框）的透明覆盖

使用以下代码实现不透明：

HTML

我的灵感来自：

我是这样解决的：

创建一个新组件 创建新组件ProgressSpinnerDialogComponent

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

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

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序进度微调器对话框”，
templateUrl:'。/progress spinner dialog.component.html'，
样式URL:['./进度微调器对话框.component.css']
})
导出类ProgressSpinnerDialogComponent实现OnInit{
构造函数（）{}
恩戈尼尼特（）{
}
}

添加样式 在styles.css中添加：

.transparent.mat对话框容器{
盒影：无；
背景：rgba（0,0,0,0.0）；
}

使用组件 下面是进度微调器的使用示例：

从'@angular/core'导入{Component，OnInit}；
从“@angular/material”导入{MatDialog，MatDialogRef}”；
从“rxjs”导入{observeable}；
从“/path/to/progress spinner dialog.component”导入{ProgressSpinnerDialogComponent}；
@组成部分({
选择器：“应用程序使用进度微调器组件”，
templateUrl:'。/使用进度微调器组件.html'，
样式URL:['./使用进度微调器组件.css']
})
导出类UseProgressSpinnerComponent实现OnInit{
建造师(
私人对话：MatDialog
) {
let observable=新的可观察（这是myObservable）；
这表明喷丝头未执行（可观察）；
}
恩戈尼尼特（）{
}
可观察的（观察者）{
设置超时（（）=>{
下一步（“等待5秒完成”）；
observer.complete（）；
}, 5000);
}
ShowProgressSpinnerUntilexected（可观察：可观察）{
让dialogRef:MatDialogRef=this.dialog.open（ProgressSpinnerDialogComponent{
panelClass:'透明'，
disableClose:正确
});
让订阅=可观察。订阅(
（答复：任何）=>{
订阅。取消订阅（）；
//处理响应
控制台日志（响应）；
dialogRef.close（）；
},
（错误）=>{
订阅。取消订阅（）；
//处理错误
dialogRef.close（）；
}
);
}
}

将其添加到应用程序模块中

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

---

基于一点不同的方法：两个组件，第一个打开对话框，第二个是对话框。在要显示微调器的组件中，只需添加：

并控制逻辑中的*ngIf。以上是调用微调器所需的全部内容，以便组件保持整洁

对话框微调器组件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';

// Requires a transparent css (panel)id in a parent stylesheet e.g.:
// #DialogSpinnerComponent {
//   box-shadow: none !important;
//   background: transparent !important;
// }

@Component({
  selector: 'app-do-not-use',
  template: `<mat-spinner></mat-spinner>`,
  styles: []
})
export class DialogSpinnerDialogComponent { }

@Component({
  selector: 'app-dialog-spinner',
  template: ``,
  styles: []
})
export class DialogSpinnerComponent implements OnInit, OnDestroy {

  private dialog: MatDialogRef<DialogSpinnerDialogComponent>;

  constructor(
    private matDialog: MatDialog,
  ) { }

  ngOnInit() {
    setTimeout(() => {
      this.dialog = this.matDialog.open(DialogSpinnerDialogComponent, { id: 'DialogSpinnerComponent', disableClose: true });
    });
  }
  ngOnDestroy() {
    setTimeout(() => {
      this.dialog.close();
    });
  }

}

从'@angular/core'导入{Component，OnInit，OnDestroy}；
从“@angular/material”导入{MatDialog，MatDialogRef}；
//在父样式表中需要透明的css（面板）id，例如：
//#喷丝头组件{
//盒影：无！重要；
//背景：透明！重要；
// }
@组成部分({
选择器：“应用程序不使用”，
模板：``，
样式：[]
})
导出类DialogSpinnerDialogComponent{}
@组成部分({
选择器：“应用程序对话框微调器”，
模板：``，
样式：[]
})
导出类DialogSpinnerComponent实现OnInit、OnDestroy{
私有对话框：MatDialogRef；
建造师(
私有matDialog:matDialog，
) { }
恩戈尼尼特（）{
设置超时（（）=>{
this.dialog=this.matDialog.open（DialogSpinnerDialogComponent，{id:'DialogSpinnerComponent'，disableClose:true}）；
});
}
恩贡德斯特罗（）{
设置超时（（）=>{
this.dialog.close（）；
});
}
}

---

声明模块中的组件，当然在entryComponents中注册

DialogSpinnerDialogComponent

。将css属性添加到父样式表中。这可能会有所改进，但我的时间有点紧。

非常感谢Aravind！我很快就会测试它！你有没有办法组织代码格式，我无法理解代码不幸的是我不明白为什么组件中有一个模板HTML@AlexanderMills模板是

微调器

组件的HTML；“HTML”是包含

微调器的组件。最佳答案就在这里。您可能还想添加选项“disableClose:true”，这样用户就不能在自己的计算机上退出该选项own@Sharpiro是的，你是对的，我会更新答案非常好的解决方案，谢谢@toongeorges通过微调器的变化，我也会添加“disableClose:true”选项。非常感谢Pimmoz！
.hide {
  opacity: 0;
}

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

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material';

// Requires a transparent css (panel)id in a parent stylesheet e.g.:
// #DialogSpinnerComponent {
//   box-shadow: none !important;
//   background: transparent !important;
// }

@Component({
  selector: 'app-do-not-use',
  template: `<mat-spinner></mat-spinner>`,
  styles: []
})
export class DialogSpinnerDialogComponent { }

@Component({
  selector: 'app-dialog-spinner',
  template: ``,
  styles: []
})
export class DialogSpinnerComponent implements OnInit, OnDestroy {

  private dialog: MatDialogRef<DialogSpinnerDialogComponent>;

  constructor(
    private matDialog: MatDialog,
  ) { }

  ngOnInit() {
    setTimeout(() => {
      this.dialog = this.matDialog.open(DialogSpinnerDialogComponent, { id: 'DialogSpinnerComponent', disableClose: true });
    });
  }
  ngOnDestroy() {
    setTimeout(() => {
      this.dialog.close();
    });
  }

}