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

发布时间：2020-12-17 10:19:17 所属栏目：安全来源：网络整理

导读：就像问题所说,我的对话框弹出屏幕底部,而不是中间.它也不会在点击时关闭,而是在我遇到逃生时关闭.页面的其余部分也没有被禁用或变灰,所以我可以将它们叠加起来(见下文). 我基本上使用与示例中完全相同的代码 import {Component} from '@angular/core';import

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

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

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文件：

@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">

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!