Question

我想在表单提交时弹出一个对话框，我将对话框组件添加到我的组件类中，并在表单提交方法中调用对话框方法。但是对话框没有正确显示，而是只有一个白色的小盒子出现在它的位置。我在app.module文件中添加了它的依赖项，并添加了条目组件。这是代码：

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，否则，它将是空的，就像你的情况一样。 / p>

角度材质对话框未正确显示

1 个答案: