角材料的对话框将无法正确显示 [英] Angular Material's Dialog won't display correctly

问题描述

所以我正在使用Angular Material 2来构建我的网站，当我尝试打开一个对话框时，它会在页面的末尾而不是它应该在页面的中央打开，有点像它没有遵守重叠规则.

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.

我在其中声明对话框组件的AppComponent看起来像这样:

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

与此同时，我的AppModule是:

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

推荐答案

您是否包含角材料CSS?像

did you include angular-material css? something like

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

这篇关于角材料的对话框将无法正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！