angular2 MdDialog не отображается как всплывающее окно

Question

Так что я пытаюсь использовать MdDialog для отображения сообщения об ошибке. К сожалению, это выглядит не как всплывающее окно, а как блок в нижней части страницы.

Что мне нужно, чтобы посмотреть или изменить, чтобы сделать эту работу правильно?

код ниже

здравом modal.component.html

<h2 md-dialog-title>{{ title }}</h2> 
<md-dialog-content> 
    <p>{{ message }}</p> 
</md-dialog-content> 
<md-dialog-actions align="right"> 
    <button md-raised-button md-dialog-close>{{ closeText }}</button> 
    <button md-raised-button *ngIf="enableNext" id="sm-next-button" 
      (click)="dialogRef.close(true)">{{ nextText }}</button> 
</md-dialog-actions> 

синфазного modal.component.ts

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

@Component({ 
    selector: 'common-modal', 
    templateUrl: 'common-modal.component.html', 
    styleUrls: [ '../modal.component.scss'] 
}) 
export class CommonModalComponent { 
    /** 
    * The text for the header or title of the dialog. 
    */ 
    title: string; 
    /** 
    * The text for the body or content of the dialog. 
    */ 
    message: string; 
    /** 
    * The text of the close button. (No, Done, Cancel, etc) 
    */ 
    closeText: string; 
    /** 
    * The text of the confirming button. (Yes, Next, etc) 
    */ 
    nextText: string; 
    /** 
    * True to show the next button. False to hide it. 
    */ 
    enableNext: boolean; 

    constructor(public dialogRef: MdDialogRef<CommonModalComponent>) { } 
} 

ошибок modal.service .ts

import { Injectable }       from "@angular/core"; 
import { MdDialog, MdDialogRef, MdDialogConfig } from "@angular/material"; 
import { Observable }       from "rxjs"; 

import { CommonModalComponent }     from "./common-modal/common-modal.component"; 
import { HIDE_NEXT_BUTTON }      from "../constants"; 

@Injectable() 
export class ErrorModalService 
{ 
    constructor(private dialog: MdDialog) { } 

    config = new MdDialogConfig(); 

    /** 
    * Show the MdDialog as an alertDialog 
    * @param title {string} The title text of the dialog 
    * @param message {string} The message content text of the dialog 
    * @param closeText {string} The text of the close button. (No, Done, Cancel, etc.) Default is OK 
    * @return {Observable<any>} True will be returned if the next button is clicked. Nothing will be returned if canceled. 
    */ 
    public show(title: string, message: string, closeText = "OK"): Observable<any> { 

     let dialogRef: MdDialogRef<CommonModalComponent>; 

     this.config.role = 'alertdialog'; 

     dialogRef = this.dialog.open(CommonModalComponent, this.config); 

     dialogRef.componentInstance.title = title; 
     dialogRef.componentInstance.message = message; 
     dialogRef.componentInstance.closeText = closeText; 
     dialogRef.componentInstance.nextText = ''; 
     dialogRef.componentInstance.enableNext = HIDE_NEXT_BUTTON; 

     return dialogRef.afterClosed(); 
    } 
} 

login.component.ts

import { Component }   from '@angular/core' 
import { Router }    from '@angular/router' 
import { Response }    from '@angular/http' 

import { LoginService }   from './login.service' 
import { Login }    from './loginModel' 
import { ErrorModalService } from "../../shared/modal/error-modal.service"; 

@Component({ 
       selector: 'login', 
       providers: [LoginService], 
       templateUrl: 'login.component.html', 
       styleUrls: ['login.component.scss'] 
      }) 
export class LoginComponent { 

    loginModel: Login   = new Login('', ''); 
    protected userName: string = ''; 
    protected password: string = ''; 

    constructor(private router: Router, 
       private loginService: LoginService, 
       private errorModalService: ErrorModalService) { } 

    private onSubmit() { 
     this.loginService.login(this.loginModel) 
      .subscribe(
       response => this.handleLoginCallback(response), 
       error => { 
         this.errorModalService.config = { 
         height: "210px", 
         width: "200px", 
         position: {top: "0", left: "0"} 
        }; 
        this.errorModalService.show(
         "LOGIN ERROR", 
         "Incorrect username or password. Please try again." 
        ); 
       }); 
    } 
} 

Answer 1

Оказывается, что Материал2 Тематизация CSS также содержит некоторые функциональные CSS и без этого наложения не работает должным образом. Material2 getting started guide упоминает, что тема не требуется. Но его легко пропустить.

Попробуйте импортировать некоторые материала в тему styles.css

@import '~@angular/material/core/theming/prebuilt/deeppurple-amber.css'; 

или

@import "node_modules/@angular/material/core/theming/prebuilt/deeppurple-amber.css"; 

фактический путь может отличаться.

Answer 2

Я использую угловую 5.1.1, сталкивается с этой проблемой, и я добавил индиго-pink.css к моему style.css смог выскочить отлично и сделать центре диалогового окна