Angular 5中的动态组件和事件发射器

Question

我是Angular的初学者，我正在尝试处理动态组件（module.ts中的entryComponents的一部分）。在定义组件中，我必须选择一行，然后按一个按钮打开一个模式（在EmailModalComponent中），其中包含2个文本字段和一个文本区域（电子邮件地址，电子邮件主题和电子邮件内容）;在填充它们之后，我必须在EmailModalcomponent的定义组件中运行一个函数（在模态中有一个按钮），以发送一个包含以前从定义组件中选择的行的信息的pdf附件的电子邮件。我创建了一个服务，从定义组件打开电子邮件模式，一个事件发射器将信息从模态发送到定义组件。一切正常，但问题是电子邮件模式总是显示在定义组件中，因为我从模板中听取事件。有什么建议吗？

EmailComponent.ts

export class EmailModalComponent implements OnInit {
  @Output() emailEvent = new EventEmitter();


  sendWithEvent(){
    this.emailEvent.emit({mail:this.emailTosend});
    console.log ("Sending event ... ", this.emailTosend)
  }

Defnition Component.ts

//发送电子邮件的功能（工作正常）

 sendEmail($event) {
        let selectedRows = this.gridOptions.api.getSelectedRows();
        let id = selectedRows[0][Object.keys(selectedRows[0])[0]];
        var url = "/shared/emailModal/sendEmail"
        var filename;          
        this.definitionHttpService.exportPdf(this.serverUrl, id).takeUntil(this.unsubscribe).subscribe(
            data => {  
                let formData = new FormData();
                // The PDF Attachment part
                let mediaType = 'application/pdf';
                let blob = new Blob([data], {type: mediaType});
                filename = this.serverUrl.substr(1) + ".pdf";
                let emailAttachment = new File([blob], filename, {type: mediaType, lastModified: Date.now()});
                formData.append('pdfFile', emailAttachment);
                // The email part
                let email = $event.mail;
                let emailToSend = new Blob([JSON.stringify(email)], {type: 'application/json'});
                formData.append('mail',emailToSend);
                this.definitionHttpService.sendEmailAttach(url, formData).takeUntil(this.unsubscribe).subscribe();
            });

    }

定义Component.html

<app-email-modal  (emailEvent)='sendEmail($event)'></app-email-modal>

//它应该不是这样的，因为我需要按一个按钮来打开电子邮件模式

在定义组件中

在emailModal组件中

Answer 1

主要模板：

<parent>
   <child (closingChild) ="hideChild()"></child>
</parent>

子组件：

@Output() closingChild : EventEmitter<any> = new EventEmitter();

closeEmailModal() 
{ 
   this.closingChild.emit(); 
}

父组件：

hideChild() 
{
   //Hide the email modal 
}

Answer 2

我找到了解决这个问题的合适方法;我使用MatDialog和@ angular / material的MAT_DIALOG_DATA来读取和发送定义组件和电子邮件模式之间的数据而不是事件发射器。下面是一个描述此解决方案的好例子。

https://blog.angular-university.io/angular-material-dialog/