각도 재료 대화 상자 구성 요소가 모든 웹 사이트 구성 요소를 숨 깁니다.

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); 
     }); 
    } 

업데이트 : 대화가 클래스 내 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 때문이다.

당신과 함께 각 재료 테마 CSS에서 그것을 무시할 수 있습니다 :

이

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

또는 사용되지 않는 그림자 - 피어싱과 :

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