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

问题描述：

该对话框显示在我的页面底部，具有奇怪的外观和行为！ Angular Material 这里是我的版本一起工作：角度材质对话框显示不正确

@角/材料“： ”^ 2.0.0 beta.8， @角/芯“： ”^ 4.2.6“

我使用引导v3.7.x（我试图用NG-引导模式，并证明它不与引导3再工作下去）

buy.component.html

<button md-button type="button" class="btn btn-primary" (click)="openPaymentWindow()">BUY</button>

个buy.component.ts：

import {MdDialog} from '@angular/material'; 
import {PaymentModal} from "./paymentModal.component" 
@Component({ 
    templateUrl: "./buy.component.html" 
}) 
    export class Buy { 
     constructor(public dialog: MdDialog) {} 

    openPaymentWindow():void { 
     const modalInstance = this.dialog.open(PaymentModal); 
     } 
    }

paymentModal.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 PaymentModal { 
      constructor(

    public dialogRef: MdDialogRef<PaymentModal>) {} 
    }

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

您是否在'NgModule'的'entryComponents'下添加了对话框组件？ – Edric

另外，如果有的话，你可以分享你的错误日志吗？ – Edric

@Edric是的，我做到了！ entryComponents：[PaymentModal]！我没有错误！我只是得到我的网页底部的HTML不是模态！我会在问题 – Hazu

答

我设法在我的主styles.scss

@import “../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css” 导入此修复这个主题;

答

您需要导入角的核心主题。没有这些，一些物质成分会变得怪异。我有我的应用程序的自定义主题，我导入我的CSS文件。

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

中发布屏幕截图我应该在哪里导入？在styles.scss中？我试过没有改变！ – Hazu

尝试封装：ViewEncapsulation.None在主要组件中。 –

我在那里得到了两个警告，但我怀疑他们可能有这个奇怪的行为！ “无法找到Angular Material核心主题，大多数材质组件可能无法按预期工作”和“找不到HammerJS。某些角度材质组件可能无法正常工作。” – Hazu

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

相关推荐