首页 其他开发 Angular Material 的对话框无法正确显示
Angular Material 的对话框无法正确显示
[英] Angular Material's Dialog won't display correctly
本文介绍了Angular Material 的对话框无法正确显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我使用 Angular Material 2 来构建我的网站，当我尝试打开一个对话框时，它会在页面的末尾打开，而不是在页面的中心，就像它应该做的那样，有点像它没有尊重覆盖规则.
我的 AppComponent，我在其中声明了我的对话框组件，如下所示:
import { Component, OnInit } from '@angular/core';从'@angular/platform-browser'导入{标题}；从'@angular/material' 导入 { MdDialog, MdDialogRef, MdDialogConfig };从 './staff.service' 导入 { StaffService };从 './eventi.service' 导入 { EventiService };@成分({模块 ID:module.id，选择器:'magie-dinverno'，templateUrl: 'app.component.html',供应商: [员工服务，事件服务]})导出类 AppComponent 实现 OnInit {公共构造函数(私有 titleService:标题，公共对话框:MdDialog){}dialogRef: MdDialogRef;电子邮件:字符串；公共设置标题(新标题:字符串){this.titleService.setTitle(newTitle);}ngOnInit(){ }开放新闻(){this.dialogRef = this.dialog.open(NewsDialog, {高度:'200px'，宽度:'400px'});this.dialogRef.afterClosed().subscribe(result => {this.email = 结果；console.log(this.email);this.dialogRef = null;});}}@成分({选择器:'新闻对话'，模板:`<div class="对话框"><div class="容器"><!-- <img/>想象无花果 --><div class="dialog-title"><h4>Rimani semper aggiornato</h4> <div class="dialog-content"><p>Per rimanere semper aggiornato iscriviti alla nostra 通讯:</p><p><label>电子邮件:<input #email></label></p>
<div class="center-align dialog-actions"><button md-button (click)="dialogRef.close(email.value)">Invia</button>
`})导出类 NewsDialog {构造函数(公共对话框引用:MdDialogRef<NewsDialog>){}}
与此同时，我的 AppModule 是这样的:
import { NgModule } from '@angular/core';从@angular/platform-browser"导入 { BrowserModule, Title };从@angular/material"导入{ MaterialModule}；从'@angular/http'导入{HttpModule}；import { AppRoutingModule } from './app-routing.module';import { AppComponent, NewsDialog } from './app.component';import { OrariComponent } from './orari.component';import { IndexComponent } from './index.component';从 './eventi.component' 导入 { EventiComponent };从'./servizi.component'导入{ServiziComponent}；import { ContattiComponent } from './contatti.component';从 './galleria.component' 导入 { GalleriaComponent };从 './admin.component' 导入 { AdminComponent}；import { AggiungiEventoComponent } from './aggiungi-evento.component';@NgModule({进口:[浏览器模块，应用路由模块，Http模块，MaterialModule.forRoot()],声明: [应用组件，索引组件，Orari组件，事件组件，服务组件，接触组件，画廊组件，管理组件，AggiungiEventoComponent,新闻对话],入口组件:[新闻对话],供应商: [标题],引导程序:[ AppComponent ]})导出类 AppModule { }
解决方案
你是否包含了 angular-material css?类似的东西
So I'm using Angular Material 2 to build my website and when I try to open a Dialog it opens at the end of the page and not in the centre of the page as it should do, somewhat like it doesn't respect the overlay rules.
My AppComponent, where i declare my dialog components, looks like this:
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
import { StaffService } from './staff.service';
import { EventiService } from './eventi.service';
@Component({
moduleId: module.id,
selector: 'magie-dinverno',
templateUrl: 'app.component.html',
providers: [
StaffService,
EventiService
]
})
export class AppComponent implements OnInit {
public constructor(private titleService: Title, public dialog: MdDialog) { }
dialogRef: MdDialogRef<NewsDialog>;
email: string;
public setTitle (newTitle: string) {
this.titleService.setTitle( newTitle );
}
ngOnInit(){ }
openNews() {
this.dialogRef = this.dialog.open(NewsDialog, {
height: '200px',
width: '400px'
});
this.dialogRef.afterClosed().subscribe(result => {
this.email = result;
console.log(this.email);
this.dialogRef = null;
});
}
}
@Component({
selector: 'news-dialog',
template: `
<div class="dialog">
<div class="container">
<!-- <img /> Immagine figa -->
<div class="dialog-title">
<h4>Rimani sempre aggiornato</h4>
</div>
<div class="dialog-content">
<p>Per rimanere sempre aggiornato iscriviti alla nostra newsletter: </p>
<p><label>Email: <input #email></label></p>
</div>
<div class="center-align dialog-actions">
<button md-button (click)="dialogRef.close(email.value)">Invia</button>
</div>
</div>
</div>
`
})
export class NewsDialog {
constructor(public dialogRef: MdDialogRef<NewsDialog>) { }
}
Meanwhile my AppModule is this:
import { NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent, NewsDialog } from './app.component';
import { OrariComponent } from './orari.component';
import { IndexComponent } from './index.component';
import { EventiComponent } from './eventi.component';
import { ServiziComponent } from './servizi.component';
import { ContattiComponent } from './contatti.component';
import { GalleriaComponent } from './galleria.component';
import { AdminComponent} from './admin.component';
import { AggiungiEventoComponent } from './aggiungi-evento.component';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
HttpModule,
MaterialModule.forRoot()
],
declarations: [
AppComponent,
IndexComponent,
OrariComponent,
EventiComponent,
ServiziComponent,
ContattiComponent,
GalleriaComponent,
AdminComponent,
AggiungiEventoComponent,
NewsDialog
],
entryComponents: [
NewsDialog
],
providers: [
Title
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
解决方案
did you include angular-material css? something like
<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
这篇关于Angular Material 的对话框无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
