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

问题

I have used prime ng and put this in shared component so that I can share this p-toast where ever I want but when I am click from parent component to open p-toast it is not getting opened on first click, click on second time it gets opened

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

Any suggestion on this.

回答1:

Its my bad,

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

来源：https://stackoverflow.com/questions/60709915/not-getting-opened-on-first-click-when-putting-primeng-toast-on-shared-component

标签

angular

angular7

primeng