Question

我是Angular的初学者，我正在尝试处理动态组件（module.ts中entryComponents的一部分）。在定义组件中，我必须选择一行，然后按一个按钮以打开一个模式（在EmailModalComponent中），该模式包含2个文本字段和一个文本区域（电子邮件地址，电子邮件主题和电子邮件内容）；填充它们后，我必须在定义组件中从EmailModalcomponent运行一个函数（使用modal中的按钮）发送带有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();
            });

    }

definition 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

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

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

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

2 个答案: