angular2 MdDialog 没有显示为弹出窗口

Question

所以我尝试使用 MdDialog 来显示错误消息。不幸的是，它不是以弹出窗口的形式出现，而是以页面底部的 block 形式出现。

我需要查看或更改什么才能使其正常工作？

下面的代码

common-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>

common-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>) { }
}

error-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，没有这个覆盖就不能正常工作。 Material 2 getting started guide提到主题是必需的。但是很容易错过这一点。

尝试在 styles.css 中导入一些 Material 主题

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

或

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

实际路径可能不同。