angular - 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)
  }

定义组件.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

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

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