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

Question

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

@角度/材料"："^2.0.0-beta.8，@角度/核心"："^4.2.6"

我正在使用 bootstrap v3.7.x （我试图使用 ng-bootstrap modal，结果发现它不再适用于 bootstrap 3）

我的组件.html

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

我的组件.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>) {}
    }

模态的 html 如何显示在我的页面底部

Answer 1

我设法通过将其导入到我的主 styles.scss 中来修复此主题

@import“../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css”；