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

Question

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

从父类我传递一个列表，列出了我感兴趣的特定JSON中可用的所有键。如果触发模态事件，用户将看到模态中列表中的所有值，并可以根据偏好删除值。

模态内容类

组件

@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>
  `
})

类

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;

问题

  

如何在父母中捕获此发出的事件值？

我尝试在我的父组件的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>

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

Answer 1

我找到了一个提供解决方案的相关StackOverflow Query。

不是使用EventEmitter，而是通过传递activeModal来关闭keyword。

类

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

}

父类

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，而且对象也可以发送回父母。对于实例，

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

将在Parent的console.log

中提供JSON