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

问题描述

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

电子邮件组件.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>

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

在定义组件中

图像1

在 emailModal 组件中

标签： angulartypescript

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

问题描述

解决方案

推荐阅读