在 angular 6 中将 primeng toast 放在共享组件上时第一次单击时未打开

Question

我使用了 prime ng 并将它放在共享组件中，这样我就可以在任何我想要的地方共享这个 p-toast 但是当我从 parent 组件中单击以打开 p-toast第一次点击没有打开，点击第二次打开

Parent-component.html

<app-modal [keydata]='c' [modalData]="modalData" [data]="selectedRowForDelete" (onConfirmModal)="onConfirm($event)" ></app-modal>

Parent-component.ts

export class CustomComponentsComponent implements OnInit {
   @ViewChild(ModalComponent ) modalComponent: ModalComponent ;  
   setPopupData(row) {
      const deleteMsg = 'You want to delete the item';
      this.modalData = {
        key: 'c', sticky: true, severity: 'warn', summary: 'Are you sure,',
        detail: deleteMsg
      }
      this.modalComponent.openModal();
    }

    onConfirm(row) {
      some code...
    }
}

modal.component.html

    <p-toast position="center" key="c" (onClose)="onReject('c')" [modal]="true" [baseZIndex]="5000">
  <ng-template let-message pTemplate="message">
    <div style="text-align: center">
      <p>{{message.summary}}</p>
    </div>
    <div class="ui-g ui-fluid">
      <div class="ui-g-6">
        <button type="button" pButton (click)="onConfirm(data, 'c')" label="Yes" id="custom-components-table-yes-button"></button>
      </div>
      <div class="ui-g-6">
        <button type="button" pButton (click)="onReject('c')" label="Cancel" id="custom-components-table-cancel-button"></button>
      </div>
    </div>
  </ng-template>
</p-toast>

modal.component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { MessageService } from 'primeng/components/common/messageservice';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  @Input() modalData;
  @Input() data;
  @Input() keydata;
  @Output() onConfirmModal = new EventEmitter<object>();
  constructor(private _messageService: MessageService) { }

  ngOnInit() {
  }

  onConfirm(data, key) {
    this._messageService.clear(key);
    this.onConfirmModal.emit(data);
  }

  onReject(key) {
    this._messageService.clear(key);
  }

  openModal() {
    this._messageService.clear();
    this._messageService.add(this.modalData);
  }
}

对此有任何建议。

Answer 1

是我的错，

Parent-component.ts

export class CustomComponentsComponent implements OnInit {
   @ViewChild(ModalComponent ) modalComponent: ModalComponent ;  
   setPopupData(row) {
      const deleteMsg = 'You want to delete the item';
      const modalData = {
        key: 'c', sticky: true, severity: 'warn', summary: 'Are you sure,',
        detail: deleteMsg
      }
      this.modalComponent.openModal(modalData);
    }

    onConfirm(row) {
      some code...
    }
}

modal.component.ts

openModal(modalData) {
    this._messageService.clear();
    this._messageService.add(modalData);
  }

在 angular 6 中将 primeng toast 放在共享组件上时第一次单击时未打开

Not getting opened on first click when putting primeng toast on shared component in angular 6

primeng

angular

angular7