角度材質對話框顯示不正確

該對話框顯示在我的頁面底部，具有奇怪的外觀和行爲！ 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

來源

2017-07-14 Hazu

您是否在'NgModule'的'entryComponents'下添加了對話框組件？ – Edric

另外，如果有的話，你可以分享你的錯誤日誌嗎？ – Edric

@Edric是的，我做到了！ entryComponents：[PaymentModal]！我沒有錯誤！我只是得到我的網頁底部的HTML不是模態！我會在問題 – Hazu

我設法在我的主styles.scss

@import 「../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css」導入此修復這個主題;

來源

2017-07-17 08:30:04 Hazu

您需要導入角的核心主題。沒有這些，一些物質成分會變得怪異。我有我的應用程序的自定義主題，我導入我的CSS文件。

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

來源

2017-07-14 18:46:15 Rama

中發佈屏幕截圖我應該在哪裏導入？在styles.scss中？我試過沒有改變！ – Hazu

嘗試封裝：ViewEncapsulation.None在主要組件中。 –

我在那裏得到了兩個警告，但我懷疑他們可能有這個奇怪的行爲！「無法找到Angular Material核心主題，大多數材質組件可能無法按預期工作」和「找不到HammerJS。某些角度材質組件可能無法正常工作。」 – Hazu

角度材質對話框顯示不正確

回答

相關問題