如何在Angular12中从NgbModal发出EventEmitter？

Question

我一直在努力制作一个bootstrap模式的可重用组件，但它变得比应该的更复杂。我终于让模态组件呈现为一个可重用的组件，但由于某些原因我不能发出事件。我试图做一个堆栈闪电战，但也失败了，因为所有的移动部件。所以我希望这就足够了。抱歉的。我会尽可能多地解释。

MODAL.COMPONENT.TS

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">{{title}}</h4>   
      <button 
        type="button" 
        class="close" 
        (click)="activeModal.dismiss('Cross click')">
        <span>&times;</span>
      </button> 
    </div>
    <div class="modal-body">
      {{content}}
    </div>
    <div class="modal-footer">
      <button 
        type="button"
        class="btn btn-primary"
        (click)="activeModal.close()">
        {{ secondaryButtonText }}
      </button>
      <button 
        type="button"
        class="btn btn-danger"
        (click)="remove()">
        {{ primaryButtonText }}
      </button>
    </div>
  `
})
export class ModalContent {
  @Input() title: string
  @Input() content: string
  @Input() primaryButtonText: string
  @Input() secondaryButtonText: string
  
  @Output() clickEvnt = new EventEmitter()

  constructor(public activeModal: NgbActiveModal) {}

  remove() {
    console.log("Hello"); //SO FAR THIS IS THE ONLY THING THAT SHOWS IN THE CONSOLE. WHICH MEANS IT'S NOT EMITTING. IT'S FIRING LOCALLY
    
    this.clickEvnt.emit() // THIS IS THE EVENT THAT I AM EMITTING
  }
} 


@Component({
  selector: 'confirmation-modal',
  templateUrl: './confirmation-modal.component.html'
})

export class ConfirmationModalComponent implements OnInit {

  constructor(private modalService: NgbModal) {}

  ngOnInit(): void {
  }
  open() {
    const modalRef = this.modalService.open(ModalContent);
    modalRef.componentInstance.title = 'Delete';
    modalRef.componentInstance.content = 'Are you sure you want to delete this task?';
    modalRef.componentInstance.primaryButtonText="Yes";
    modalRef.componentInstance.secondaryButtonText="No";    
  }

}

MODAL.COMPONENT.HTML

// Simple enough. Just a button that open the modal. The modal component (above) includes the modal itself as well as the functionality within it
<button (click)="open()" class="text-danger"></button>  

RECEIVING.COMPONENT.HTML

// The modal is received and the event that was emitted should be caught here (???) right? And in turn, it fires the onDelete() which at the moment all it has is a console log to test it
<confirmation-modal (clickEvnt)="onDelete(task)"></confirmation-modal>

我错过了什么？

提前感谢

Answer 1

我改变了stackblitz，现在开始工作了。

如何说@MikeOne你需要订阅事件发射器：

@Output() clickEvnt = new EventEmitter();

open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.title = 'Delete';
    modalRef.componentInstance.content =
      'Are you sure you want to delete this task?';
    modalRef.componentInstance.primaryButtonText = 'Yes';
    modalRef.componentInstance.secondaryButtonText = 'No';

    modalRef.componentInstance. clickEvnt.subscribe( event => this.clickEvnt.emit());
  }