模态/对话框在屏幕底部打开,但行为不正常

Question

就像问题所说,我的对话框弹出屏幕底部,而不是中间.它也不会在点击时关闭,而是在我遇到逃生时关闭.页面的其余部分也没有被禁用或变灰,所以我可以将它们叠加起来(见下文).

我基本上使用与示例中完全相同的代码

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
    selector: 'dialog-overview-example',
    template: '<button md-button (click)="openDialog()">Open dialog</button>'
})
export class DialogOverviewExample {
    constructor(public dialog: MdDialog) {}

    public openDialog(): void {
        this.dialog.open(BasicDialog);
    }
}

@Component({
    selector: 'dialog-overview-example-dialog',
    template: "<p> Hi, I'm a dialog! </p>",
})
export class BasicDialog {}

我认为我的进口是正确的,但它们是:

imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(ROUTES, {useHash: true}),
    MdDialogModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    CommonModule
],

请注意,控制台中没有错误或警告,我已尝试禁用css.

有人见过这个吗？

Answer 1

原来问题在于我如何导入css.以前我导入了一个scss文件:

@import '../../node_modules/@angular/material/prebuilt-themes/purple-green.css';

我确实导入了样式,这就是为什么我认为这已经足够了; 显然,你需要导入你的css index.html:

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

就是这样.回想起来,它应该从一开始就很明显,但就像我说的那样,我认为它是正确导入的,因为样式实际上是导入的.此外,我尝试导入缩小版本,这也没有用.

Answer 2

问题不在于导入/包括角形材质主题。

要解决此问题，请将代码添加到全局CSS中（如果使用cli），然后添加到styles.css中

@import“ ~@angular/material/prebuilt-themes/indigo-pink.css”;

Answer 3

在index.html中添加以下指向角度材料的链接

<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Answer 4

我更喜欢我的 angular.json 文件中的这种方法

"styles": [
              "src/styles/styles.less",             
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"              
            ],