각형 재질 대화 상자가 제대로 표시되지 않습니다.

Question

양식 제출시 대화 상자를 팝업으로 표시하고 구성 요소 클래스에 대화 상자 구성 요소를 추가하고 양식 전송 메서드에서 대화 상자 메서드를 호출했습니다. 대화 상자가 제대로 표시되지 않고 흰색 작은 상자 만 대신 나타납니다. app.module 파일에 종속성을 추가하고 항목 구성 요소도 추가했습니다. 당신의 template: '', 비어 있기 때문에

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

그것은 당신이 뭔가 대화 상자를 채우기 위해 원하는 경우, 당신은 그렇지 않으면 귀하의 경우와 같이 비어있을 것입니다, 그것을 위해 어떤 HTML을 지정해야합니다 : 그것은 코드입니다.