Modal/Dialog在屏幕底部打开，并且行为不正常

就像问题所述，我的对话框弹出在屏幕的底部，而不是在中间。它也不会在点击时关闭，而是只要我点击逃生。页面的其余部分也没有禁用或变灰，所以我可以将它们堆叠起来（见下文）。Modal/Dialog在屏幕底部打开，并且行为不正常

我使用的基本上是完全相同的代码作为例子

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。

以前有人看过这个吗？

来源

2017-05-24 Chris Smeal

你有你的模块中一些重复的进口。我不确定Angular是如何表现的，但是因为你已经导入了两次'BrowserAnimationsModule'，你可以尝试清理它并看看会发生什么？ – joh04667

良好的捕获，但不幸的是，这并没有解决问题。谢谢。 –

就像另一个人站起来一样，你有'FormsModule'导入两次。 – joh04667

原来，问题出在我如何导入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">

所以它就在那里。回想起来，它应该从一开始就很明显，但正如我所说的，我认为它是正确导入的，因为该样式实际上是导入的。此外，我试图导入一个缩小版本，但也没有奏效。

来源

2017-05-25 04:18:11

中的index.html以下链接添加到角材料

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

来源

2017-12-06 16:13:41

Modal/Dialog在屏幕底部打开，并且行为不正常

回答

相关问题