使用 ng-bootstrap Angular 2.x 中的 ActiveModal 捕获发出的事件

Question

我在打字稿中使用 ng-bootstrap 和 Angular。我从文档中合并的特定示例是 Components as content.

我从 parent class 传递我感兴趣的特定 JSON 中所有可用键的列表。如果触发了模态事件，用户会看到模态列表中的所有值，并可以根据偏好删除这些值。

模态内容Class

组件

@Component({
    selector: 'ngbd-modal-content',
    template: `
    <div class="modal-header">
      <h4 class="modal-title">Edit your Semantic Query</h4>
      <button type="button" 
       class="close" aria-label="Close" 
       (click)="activeModal.dismiss('Cross click')"> <!--Cross Button on Top-->
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="modal-body">
        Available Keywords that can be Removed:
      <ul *ngIf="modalKeys.length > 1"> <!--Display More than 1 Keywords -->

          <li *ngFor="let eachKey of modalKeys; let i=index;">
              <div>
                <span><code>{{eachKey}}</code></span>
                 <!-- Provide Red cross Button to remove the keyword-->
                 <button class="btn-xs btn-danger" *ngIf="i > 0" 
                   (click)="removeQParam(eachKey, i);">&times;</button>
              </div>
          </li>
      </ul>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-dark" 
        (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})

Class

export class NgbdModalContent {
    @Input() modalKeys: string[] = [];
    @Output() removedKeys = new EventEmitter();
    constructor(public activeModal: NgbActiveModal) {}

    removeQParam(keyword: string, clickedIndex: number) {
        // remove the keyword from the Modal's list
        this.modalKeys.splice(clickedIndex, 1);
        // send the removed keyword back to the parent
        this.removedKeys.emit(keyword);
    }

}

我在 <code (click)=callEditModal()></code>

上调用模式（来自 Parent）

其中callEditModal()如下：

let keys: string[] = []; // empty array for all keys of Object semQJSon

        for (let key in this.semQJSon) {
            if (this.semQJSon.hasOwnProperty(key)) {
                keys.push(key); // push all available keys of the object
            }
        }
         // taken from the ng-bootstrap docs
        const modalRef = this.modal.open(NgbdModalContent);
         // pass all the keys to the @Input() modalKeys in ModalContent Class
        modalRef.componentInstance.modalKeys = keys;

问题

How do I catch this Emitted Event Value in the Parent?

我尝试在我的 Parent 组件的 HTML 中使用 <ng-template (removedKeys)=processModalInteraction($events)，但出现以下错误：

Event binding removedKeys not emitted by any directive
 on an embedded template. Make sure that the event name is spelled correctly 
and all directives are listed in the "@NgModule.declarations". ("
     <ng-template [ERROR ->](removedKeys)="processModalInteraction($event)"</ng-template>

如果我在 Parent 的 HTML 代码中使用 <ngbd-modal-content></ngbd-modal-content>，我可以看到不是我想要的模式

Answer 1

我找到了相关的，提供了解决方案。

而不是使用 EventEmitter，通过传递 keyword 关闭 activeModal 就可以了。

Class

export class NgbdModalContent {
    @Input() modalKeys: string[] = [];
    constructor(public activeModal: NgbActiveModal) {}

      removeQParam(keyword: string, clickedIndex: number) {
        // remove the keyword from the Modal's list
        this.modalKeys.splice(clickedIndex, 1);
        // send the removed keyword back to the parent
        this.activeModal.close(keyword);
      }

}

Parent Class

const modalRef = this.modal.open(NgbdModalContent);
        modalRef.componentInstance.modalKeys = keys;
        modalRef.result
            .then((result) => {
                console.log(result); // this is where you can capture your modal activity
            });

附加信息

不仅strings而且Objects也可以发回parent。例如，

this.activeModal.close({'result': keyword})

将在 Parent 的 console.log

处提供 JSON

使用 ng-bootstrap Angular 2.x 中的 ActiveModal 捕获发出的事件

Capture Emitted Event from an ActiveModal in Angular 2.x with ng-bootstrap

modal-dialog

ng-bootstrap

angular

模态内容Class

问题

Class

Parent Class