Angular Material的對話框將無法正確顯示

因此，我使用Angular Material 2構建我的網站，當我嘗試打開一個對話框時，它會在頁面的末尾打開，而不是在頁面的中心，因爲它應該有點像它不尊重疊加規則。Angular Material的對話框將無法正確顯示

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

來源

2017-01-28 Michele Da Rin

這裏發生了什麼： [對話框的錯誤（https://cloud.githubusercontent.com/assets/21367391/22396317/d58f6ecc-e555-11e6-8a3f-41e9d2f9b177.PNG） –

任何錯誤在控制檯？ –

你有角的材料CSS？像

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

來源

2017-01-28 12:54:10

不是，就是這樣，沒想到這是一個白癡錯誤，謝謝 –

它發生）我很高興幫助 –

我有一個類似的問題。檢查你是否已經設置了DOCTYPE。

你的index.html

檢查的開始需要<!DOCTYPE html>https://github.com/angular/material2/issues/2351

來源

2017-01-28 11:42:25 m0tter

是的，我擁有它。 –

如果從對話框中刪除所有的HTML和OpenNews（）的大小設置，會發生什麼？回到基本實施。 – m0tter

它並沒有太大變化：[dialog-error-2]（https://cloud.githubusercontent.com/assets/21367391/22396541/693f1a0e-e55c-11e6-8702-87c2eadf1d80.PNG） –

Angular Material的對話框將無法正確顯示

回答

相關問題