角材料对话框显示不正确

Question

I want to popup a dialogue box on form submission, I added dialogue box components into my component class and invoked dialog box method in form submit method. but the dialogue box is not showing up properly instead only a white small box is appearing in its place. I have added its dependencies in app.module file and added the entry component as well. it is the code:

import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, FormArray, Validators } from '@angular/forms';
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';


@Component({
  selector: 'dialog-overview-example',
  template: ''
})
export class DialogOverviewExample {

    animal: string;
    name: string;

    constructor(public dialog: MdDialog) { this.animal = 'tiger'; this.name = 'ali';}

    openDialog(): void {
      let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
        width: '250px',
        data: { name: this.name, animal: this.animal }
      });

      dialogRef.afterClosed().subscribe(result => {
        console.log('The dialog was closed');
        this.animal = result;
      });
    }

  }
@Component({
  selector: 'dialog-overview-example-dialog',
  template: '',
})
export class DialogOverviewExampleDialog {

    constructor(
      public dialogRef: MdDialogRef<DialogOverviewExampleDialog>,
      @Inject(MD_DIALOG_DATA) public data: any) { }

    onNoClick(): void {
      this.dialogRef.close();
    }

  }



@Component({
  selector: 'my-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {  


  constructor(public dialog: MdDialog){}


  confirmForm(){
    let dialogueBox: DialogOverviewExample = new DialogOverviewExample(this.dialog);    
    dialogueBox.openDialog();
  }

  onSubmit(){  
    this.confirmForm();  
    let formControls = JSON.stringify(this.reviewForm.value.controlArray);          
    this.formService.createForm(formControls)
      .subscribe(
        data => console.log(data),
        error => console.error(error)
    );
    this.reviewForm.reset();    
  }
}

Answer 1

这是因为template: '',为空，如果要在对话框中填充某些内容，则应为其指定任何HTML，否则，如您的情况，它将为空。