angular2 MdDialog 没有显示为弹出窗口
angular2 MdDialog is not appearing as a popup
所以我正在尝试使用 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."
);
});
}
}
看来 material2 主题 css 也包含一些功能性 css,如果没有这个叠加层将无法正常工作。 Material2 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";
实际路径可能不同。
我正在使用 angular 5.1.1,遇到了这个问题,我在我的 style.css 中添加了 indigo-pink.css 能够完美弹出并使对话框居中
当我开始使用 Material 模块时没有启动安装阶段,这发生在我身上,尝试重新 运行
$ ng add @angular/material
这将启动您的项目以配置 Material。
所以我正在尝试使用 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."
);
});
}
}
看来 material2 主题 css 也包含一些功能性 css,如果没有这个叠加层将无法正常工作。 Material2 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";
实际路径可能不同。
我正在使用 angular 5.1.1,遇到了这个问题,我在我的 style.css 中添加了 indigo-pink.css 能够完美弹出并使对话框居中
当我开始使用 Material 模块时没有启动安装阶段,这发生在我身上,尝试重新 运行
$ ng add @angular/material
这将启动您的项目以配置 Material。