css - Angular2 Material Dialog css，对话框大小

Question

Angular2 Material 团队最近发布了 MDDialog https://github.com/angular/material2/blob/master/src/lib/dialog/README.md

我想更改 angular2 Material 对话框的外观和感觉。例如，要更改弹出容器的固定大小并使其可滚动，请更改背景颜色等。最好的方法是什么？有我可以玩的 css 吗？

Answer 1

我们可以使用两种方法来更改 Angular Material 中 MatDialog 组件的大小

1) 从调用对话框组件的外部组件

import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';


dialogRef: MatDialogRef <any> ;

constructor(public dialog: MatDialog) { }

openDialog() {
        this.dialogRef = this.dialog.open(TestTemplateComponent, {
            height: '40%',
            width: '60%'
        });
        this.dialogRef.afterClosed().subscribe(result => {
            this.dialogRef = null;
        });
    }

2) 来自内部对话框组件。动态改变它的大小

import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material';

constructor(public dialogRef: MatDialogRef<any>) { }

 ngOnInit() {
        this.dialogRef.updateSize('80%', '80%');
    }

在对话框组件的任何函数中使用 updateSize()。它将自动更改对话框大小。

有关更多信息，请查看此链接 https://material.angular.io/components/component/dialog