Question

对话框显示在我页面的底部，带有奇怪的外观和行为！ Angular Material 以下是我正在使用的版本：

@ angular / material＆＃34;：＆＃34; ^ 2.0.0-beta.8， @ angular / core＆＃34;：＆＃34; ^ 4.2.6＆＃34;

我正在使用bootstrap v3.7.x（我试图使用ng-bootstrap模式，结果证明它不再适用于bootstrap 3）

my.component.html

 <button md-button type="button" class="btn btn-primary" (click)="openMyModal()">OPEN</button>

my.component.ts：

import {MdDialog} from '@angular/material';
import {MyModal} from "./myModal.component"
@Component({
  templateUrl: "./my.component.html"
})
    export class My {
      constructor(public dialog: MdDialog) {}

    openMyModal():void {
        const modalInstance = this.dialog.open(MyModal);
      }
    }

myModal.component.ts：

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

        @Component({
          template: `<div class="modal-body">
                          Modal content Here
                          </div>`
        })
        export class MyModal {
          constructor(

    public dialogRef: MdDialogRef<MyModal>) {}
    }

How the html of the modal is displayed on botton of my page

Answer 1

我设法通过在我的主要styles.scss中导入它来修复此主题

@import＆＃34; ../ node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css" ;;

Answer 2

您需要导入Angular核心主题。没有它，一些物质成分就会变得怪异。我的应用程序有一个自定义主题，我在我的css文件中导入。

@import '../../../node_modules/@angular/material/theming';

角度材料对话框未正确显示

2 个答案: