Angular2 MdDialog不显示内容，只显示窗口

Question

我尝试使用MdDialog弹出一个窗口。但它只显示一个空白的窗口。没有内容。

dialog.component.ts：

import {Component, NgModule, ViewContainerRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

import { MaterialModule } from '@angular/material'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material'; 

@Component({ 
    selector: 'dialog', 
    template: ` 
     <h1 md-dialog-title>Dialog</h1> 
     <h2>Hi, I am the dialog</h2> 
     <button md-raised-button (click)="dialogRef.close()">Close dialog</button> 
    ` 
}) 

export class DialogComponent { 
    constructor(public dialogRef : MdDialogRef<any>){}; 
} 

fileuploader.component.ts

import { Component } from '@angular/core'; 
import '../../assets/css/styles.css'; 
import { FileUploader } from 'ng2-file-upload'; 
import { DialogComponent } from './dialog.component'; 
import {MdDialog, MdDialogConfig, MdDialogRef} from '@angular/material'; 
import {NgModule, ViewContainerRef} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 
import { MaterialModule } from '@angular/material'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

@Component({ 
    selector: 'file-uploader', 
    templateUrl: '../templates/fileuploader.component.html', 
    styleUrls: ['../css/fileuploader.component.css'] 
}) 

/** Class representing App Component. */ 
export class FileUploaderComponent { 


    constructor(
    public dialog : MdDialog, 
) { 


     console.log("ImageUpload:uploaded:", item, status, response, headers); 
     console.log("test"); 
     let dialogRef = this.dialog.open(DialogComponent, { 
     height: '400px', 
     width: '600px', 
     }); 

     dialogRef.afterClosed().subscribe(result => { 
     dialogRef = null; 
     }); 

     console.log("done"); 
    }; 
    } 
} 

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { RouterModule, Routes } from '@angular/router'; 
import { FormsModule } from '@angular/forms'; 
import { AngularFireModule, AuthProviders, AuthMethods } from 'angularfire2'; 
import { AppComponent } from './components/app.component'; 
import { LoginComponent } from './components/login.component'; 
import { DashboardComponent } from './components/dashboard.component'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { LoggedInGuard } from './common/logged-in.guard'; 
import { MaterialModule } from '@angular/material'; 
import { HeaderComponent } from './components/header.component'; 
import { FileUploaderComponent } from './components/fileuploader.component'; 
import { FileDropDirective, FileSelectDirective } from 'ng2-file-upload'; 
import { DialogComponent } from'./components/dialog.component'; 


/** 
* App Module 
* The app module handles all the imports, 
* declerations, exports and providers. Any new 
* component need to be declared here. 
*/ 

@NgModule({ 
    imports: [ 
    BrowserModule, 
    AngularFireModule.initializeApp(firebaseConfig, firebaseAuthConfig), 
    RouterModule.forRoot(appRoutes), BrowserAnimationsModule, 
    MaterialModule.forRoot() 
    ], 
    declarations: [ 
    AppComponent, LoginComponent, DashboardComponent, HeaderComponent, 
    FileUploaderComponent, FileSelectDirective, FileDropDirective, DialogComponent 
    ], 
    entryComponents: [ 
    DialogComponent 
    ], 
    exports: [], 
    providers: [LoggedInGuard], 
    bootstrap: [AppComponent] 
}) 
/** Class representing App Module. */ 
export class AppModule { } 

我认为什么是弹出一个窗口，在dialogcomponent中显示消息“Dialog”“嗨，我是一个对话框”。但现在，只是一个空白的窗口。

谢谢。

Answer 1

问题是关于选择器的事情。看起来“对话”选择器过于笼统，与材料包混淆。将其更改为更具体的对话框。它工作正常。