角度材质对话框无法正确显示答案

【问题标题】：Angular Material's Dialog won't display correctly角度材质对话框无法正确显示
【发布时间】：2017-06-14 00:57:54
【问题描述】：

所以我使用 Angular Material 2 来构建我的网站，当我尝试打开一个对话框时，它会在页面末尾打开，而不是在页面中心打开，就像它应该做的那样，有点像它没有尊重覆盖规则。

我的 AppComponent，我在其中声明我的对话框组件，如下所示：

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

同时我的 AppModule 是这样的：

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

【问题讨论】：

会发生什么：dialog-error
控制台有错误吗？

标签： angular typescript dialog angular-material2

【解决方案1】：

您是否包含了 angular-material css？像

<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">

【讨论】：

不，就是这样，没想到这是一个愚蠢的错误，谢谢
它发生了）我很乐意提供帮助

【解决方案2】：

我也遇到过类似的问题。检查您是否设置了 DOCTYPE。

index.html 开头需要<!DOCTYPE html>

查看https://github.com/angular/material2/issues/2351

【讨论】：

是的，我有。
如果从对话框中删除所有 html 并从 OpenNews() 中删除大小设置会发生什么？回到基本实现。
变化不大：dialog-error-2