3

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

对话框.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>){};
}

文件上传器.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 { }

我应该弹出一个窗口并在对话框组件中显示消息，“对话框”“嗨，我是一个对话框”。但现在，只是一个空白的窗口。

谢谢你。

4

1 回答 1

4

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

于 2017-04-26T20:52:13.813 回答