模式/对话框在屏幕底部打开，行为不正常
模式/对话框在屏幕底部打开，行为不正常
提问于 2017-05-25 00:18:26
正如问题所说，我的对话框是在屏幕底部弹出的，而不是在中间。它也不会在单击时关闭，而是在我按下退出时关闭。页面的其余部分也没有被禁用或灰显，所以我可以将它们堆叠起来(见下文)。
我使用的代码与示例中的代码基本相同
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。
有人见过这个吗？
回答 4
Stack Overflow用户
发布于 2017-05-25 12:18:12
原来问题出在我导入css的方式上。之前我导入到一个scss文件中：
@import '../../node_modules/@angular/material/prebuilt-themes/purple-green.css';我确实导入了样式，这就是为什么我认为这已经足够了；显然，您需要在index.html中导入css
<link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">所以就是这样。回想起来，它从一开始就应该是显而易见的，但就像我说的，我假设它是正确导入的，因为样式实际上是导入的。此外，我尝试导入一个缩小的版本，但也不起作用。
Stack Overflow用户
发布于 2018-03-28 00:35:49
问题不是导入/包含角度材质主题。
要解决此问题，请将代码添加到您的全局css中，如果使用cli，则添加到您的styles.css中
@导入"~@angular/material/prebuilt-themes/indigo-pink.css"；
Stack Overflow用户
发布于 2018-07-11 09:11:22
在我的angular.json文件中，我更喜欢这种方法
"styles": [
"src/styles/styles.less",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44163721
复制相关文章
相似问题
腾讯云开发者
