就像问题所说,我的对话框弹出屏幕底部,而不是中间.它也不会在点击时关闭,而是在我遇到逃生时关闭.页面的其余部分也没有被禁用或变灰,所以我可以将它们叠加起来(见下文).
我基本上使用与示例中完全相同的代码
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,CommonModule
],
请注意,控制台中没有错误或警告,我已尝试禁用css.
有人见过这个吗？
原来问题在于我如何导入css.以前我导入了一个scss文件：
原文链接：https://www.f2er.com/angularjs/240514.html@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">
就是这样.回想起来,它应该从一开始就很明显,但就像我说的那样,我认为它是正确导入的,因为样式实际上是导入的.此外,我尝试导入缩小版本,这也没有用.
