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

material2テーマのCSSはまた、いくつかの機能のCSSが含まれており、このオーバーレイなしで正常に動作しないことが表示されます。 Material2 getting started guideにはテーマが必要であると記載されています。しかし、これを見逃すのは簡単です。

は、実際のパスは異なる可能性が

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

または

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

Styles.cssをして、いくつかの材料のテーマをインポートしてみます。

Answer 2

私は、角度の5.1.1を使用していますこの問題に直面していたと私は完全にポップアップ表示され、ダイアログの中央に