在angular 6中的共享组件上放置涂底漆土司时，第一次单击时未打开

我使用了prime ng并将其放在共享组件中，这样我就可以随时随地共享此p-toast，但当我从父组件单击以打开p-toast时，它不会在第一次单击时打开，而是在第二次打开时单击

Parent-component.html

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

    <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.html

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

    <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>

{{message.summary}

modal.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...
    }
}

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

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

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

从'@angular/core'导入{Component，OnInit，EventEmitter，Input，Output}；
从'priming/components/common/MessageService'导入{MessageService}；
@组成部分({
选择器：“应用程序模式”，
templateUrl:'./modal.component.html'，
样式URL:['./modal.component.scss']
})
导出类ModalComponent实现OnInit{
@输入（）模态数据；
@输入（）数据；
@输入（）键数据；
@Output（）onConfirmModal=新的EventEmitter（）；
构造函数（私有_messageService:messageService）{}
恩戈尼尼特（）{
}
onConfirm（数据、密钥）{
此._messageService.clear（键）；
this.onConfirmModal.emit（数据）；
}
onReject（键）{
此._messageService.clear（键）；
}
openModal（）{
这是。_messageService.clear（）；
this._messageService.add（this.modalData）；
}
}

这方面有什么建议吗？这是我的错

父组件

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

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

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

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

modal.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...
    }
}

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

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

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

这是我的错

父组件

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

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

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

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

modal.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...
    }
}

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

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

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

---

很高兴你找到了解决方案。@RagavanRajan he:）指出两个代码清单之间的变化很好，使找到解决方案更快：）这是关于modalData和这个。modalData？很高兴你找到了解决方案。@RagavanRajan he:）指出两个代码清单之间的变化很好，使查找解决方案更快：）这是关于modalData和this.modalData的吗？