角度材料ダイアログコンポーネントは、すべてのウェブサイトコンポーネントを非表示にします。

Question

角度5と角度のある素材（最新バージョン）を使用していますが、ページからダイアログを開こうとしています。オープニングをトリガーするボタンをクリックすると、ウェブサイト全体が空白の背景に置かれます。たとえば、ダイアログにコンテンツが重なっていて、すべて隠しているようなものです。

import { Component, OnInit, Inject } from '@angular/core'; 
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-dialog', 
    templateUrl: 'dialog.component.html', 
    styleUrls: ['dialog.component.scss'] 
}) 
export class DialogComponent implements OnInit { 

    constructor(public dialogRef: MatDialogRef<DialogComponent>, 
     @Inject(MAT_DIALOG_DATA) public data: any) { } 

    onNoClick(): void { 
     this.dialogRef.close(); 
    } 

    ngOnInit() { 
    } 

} 

これは、ダイアログを開く方法です。

onSubmit() { 

     const dialogRef = this.dialog.open(DialogComponent, { 
      width: '250px', 
      data: { name: 'Juan Manuel', animal: 'Perro' } 
     }); 

     dialogRef.afterClosed().subscribe(result => { 
      console.log('The dialog was closed'); 
      console.log(result); 
     }); 
    } 

UPDATE： 私は、ダイアログがレンダリングされた後、クラスは私のhtmlタグに追加されていることを見てきました。 .cdk-global-scrollblockなぜ私のHTMLタグにそのクラスが追加されたのか分かりません。

.cdk-global-scrollblock { 
    position: fixed; 
    width: 100%; 
    overflow-y: scroll; 
} 

これは私のエラーの原因です。誰かがなぜそのクラスが自分のhtmlタグにあるのか知っていますか？

Answer 1

MatDialogConfigのAPI Docsを参照してください。 hasBackdropをfalseに設定することができます。

const dialogRef = this.dialog.open(DialogComponent, { 
     width: '250px', 
     data: { name: 'Juan Manuel', animal: 'Perro' }, 
     hasBackdrop: false 
    }); 

Answer 2

これは絶対的な位置を持っているあなたのコンポーネントに影響を与えますHTML bodyに注入されたcdk-global-scrollblockによるものです。

.cdk-global-scrollblock { 
    position: static; 
    overflow: hidden !important; 
} 

または廃止予定のシャドウ・ピアスと：：

あなたがして角度素材のテーマCSSでそれを上書きすることができ

/deep/ .cdk-global-scrollblock { 
    position: static; 
    overflow: hidden !important; 
}