Question

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

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

Answer 1

你是否包括角度材料css？

之类的东西

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

Answer 2

我有类似的问题。检查您是否已设置DOCTYPE。

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

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

Angular Material的对话框无法正确显示

2 个答案: