Angular Material's Dialog won't display correctly

问题

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

回答1:

did you include angular-material css? something like

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

回答2:

I've had a similar problem. Check that you've got your DOCTYPE set.

You need <!DOCTYPE html> at the start of index.html

Check https://github.com/angular/material2/issues/2351

来源：https://stackoverflow.com/questions/41909307/angular-materials-dialog-wont-display-correctly

标签

angular

typescript

dialog

angular-material2