首页 文章

角度材质对话框组件隐藏了我的所有网站组件

提问于
浏览 次
4

我正在使用角度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() {
    }

}

这是打开Dialog的方法 .

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标签上的那个类？

angular material-design angular-material

2 回答

  • 2

    这是因为注入HTML body 的 cdk-global-scrollblock 会影响位置绝对的组件 .

    您可以在Angular Material主题CSS中覆盖它：

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

    或者已弃用的暗影穿孔：

    /deep/ .cdk-global-scrollblock {
    position: static;
    overflow: hidden !important;
}
    回复于
  • 4

    有关 MatDialogConfig ，请参阅API Docs . 您可以将 hasBackdrop 设置为 false .

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

相关问题