Angular 2 Material Progress Spinner：顯示爲疊加

Question

如何將Angular 2 Material Progress Spinner顯示爲當前視圖（頁面或模式對話框）的某種透明疊加層？

Answer 1

使用下面的代碼來實現不透明

HTML

<div style="height:800px" [class.ops]="show"> 
    <h2 [class.opaque]="trans">{{name}}</h2> 
    <button class="btn btn-success" (click)="toggleSpinner()"> See spinner </button> 
</div> 
<spinner [show]="show" [size]="150"> </spinner> 

COMPONENT

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

@Component({ 
    selector: 'spinner', 
    template: ` 
     <div *ngIf="show"> 
      <span> 
      <i class="fa fa-spinner fa-spin" [ngStyle]="{'font-size': size+'px'}" aria-hidden="true"></i> 
      </span> 
     </div> 
    ` 
}) 
export class SpinnerComponent { 
    @Input() size: number = 50; 
    @Input() show: boolean; 

    toggleSpinner() { 
     this.show = !this.show; 
     this.trans=!this.trans; 
    } 

} 

CSS

.ops { 
    opacity :0; 
} 

LIVE DEMO

Answer 2

我的靈感來自於：Overriding Angular Material Size and Styling of md-dialog-container

這是我如何解決它：

創建進度微調-dialog.component.html內容的新組件ProgressSpinnerDialogComponent：

<mat-spinner></mat-spinner> 

in styles.css add：

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

打開你的組件時，設置panelClass屬性：

this.dialog.open(ProgressSpinnerDialogComponent, { panelClass: 'transparent' });