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提到需要主题。但很容易错过这个。

尝试在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，正面临这个问题，我将indigo-pink.css添加到我的style.css能够完美弹出并制作对话框中心

Answer 3

这是我在没有开始安装阶段就开始使用Material模块并尝试重新运行时发生的事情

$ ng add @angular/material

这将启动您的项目以使用Material进行配置。

angular2 MdDialog没有显示为弹出窗口

3 个答案: