Динамические компоненты и излучатель событий в angular 5

Я новичок в Angular, пытаюсь разобраться с динамическими компонентами (часть entryComponents в module.ts). В компоненте определения мне нужно выбрать строку, затем нажать кнопку, чтобы открыть модальное окно (в 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)
  }

Определение 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>

// этого не должно быть, потому что мне нужно нажать кнопку, чтобы открыть модальное окно электронной почты

в компоненте определения

img1

в компоненте emailModal

img2

это модальный компонент от вас или вы использовали сторонний компонент?

zgue 10.08.2018 19:26

Да, это компонент, который я создал

Farouk.ch 11.08.2018 22:52
3
2
803
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Основной шаблон:

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

Дочерний компонент:

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

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

Родительский компонент:

hideChild() 
{
   //Hide the email modal 
}

Мне не нужно скрывать модальное окно электронной почты, мне просто нужно, чтобы оно отображалось только тогда, когда я нажимаю кнопку электронной почты не все время. используя его селектор, сделайте его там все время: <app-email-modal (emailEvent) = 'sendEmail ($ event)'> </app-email-modal>

Farouk.ch 11.08.2018 22:57

@ Farouk.ch То, что вам нужно, это менеджер оверлеев. Это простой инструмент, который запускает и закрывает модальные окна при необходимости, и его очень легко интегрировать в ваш существующий проект. github.com/ng2-ui/overlay

Ashish Koshy 12.08.2018 10:03

@oneinazilion спасибо за вашу помощь, моя основная проблема в том, как читать эмиттер событий, поступающий из модального окна электронной почты, просто я мог бы открыть и закрыть модальное окно, но при вызове этого в шаблоне: <app-email-modal (emailEvent) = 'sendEmail ($ event)'> </app-email-modal> электронное письмо всегда будет там, и когда я нажимаю кнопку, оно тоже будет отображаться. Заголовок моего вопроса настолько ясен: динамические компоненты и эмиттеры событий. Итак, я пытаюсь найти способ по-другому читать эмиттеры событий, я пытался использовать ng-dynamic-component: npmjs.com/package/ng-dynamic-component, но не работает

Farouk.ch 13.08.2018 11:12
Ответ принят как подходящий

Я нашел подходящий способ решения этой проблемы; Я использовал MatDialog и MAT_DIALOG_DATA из @ angular / material для чтения и отправки данных между компонентом определения и модальным окном электронной почты вместо эмиттера событий. Ниже приведен хороший пример, описывающий это решение.

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

Другие вопросы по теме