Не открывается при первом щелчке при добавлении тоста primeng в общий компонент в angular 6 - PullRequest
Новая
       30

Не открывается при первом щелчке при добавлении тоста primeng в общий компонент в angular 6

0 голосов
/ 16 марта 2020

Я использовал Prime NG и поместил его в общий компонент, чтобы я мог поделиться этим p-тостом где угодно, но когда я щелкаю по родительскому компоненту, чтобы открыть 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);
  }
}

Любые предложения по этому вопросу.

1 Ответ

0 голосов
/ 16 марта 2020

Это плохо,

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