web-dev-qa-db-ja.com

bootstrap=モーダルコンポーネントから親へのEventEmitter

私はng-bootstrapをAngular 4で使用しています。特定のユースケースは、「コンテンツとしてのコンポーネント」（ https：// ng- bootstrap.github.io/#/components/modal/examples ）。

子から親にデータを送信したいと思います。このために、例から動作しないプランクを作成しました。

modal.component.ts

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

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
    </div>
    <div class="modal-body">
      <p>Hello!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="testclick('teststring')">Testclick</button>
    </div>
  `
})
export class NgbdModalContent {
  @Output() clickevent = new EventEmitter<string>();

  constructor(public activeModal: NgbActiveModal) {}

  testclick(teststring: string) {
    this.clickevent.emit(teststring);
  }
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: 'src/modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
  }
}

modal.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

ご覧のように、EventEmitterをNgbdModalContentコンポーネントに追加しただけです。私が欲しいのは、testclickイベントを受信し、それをコンソールに記録するNgbdModalComponentです。上記のコードのどこに配置できますか？

私はここに非常に似た質問があることを知っています bootstrap modal to parent からのイベントエミッターですが、それはまだだと思いますここでコンポーネントとしてモーダルを直接開くので、非常に異なる実装シナリオ。

明らかに、modalService自体のコードに進む必要のないいくつかの簡単なソリューションを好むでしょう...

angularng-bootstrap
21
Ruehri

モーダルのコンテンツとして開かれたコンポーネントの@Outputイベントに直接サブスクライブできるため、実際にはveryシンプルです。

export class NgbdModalComponent {
  constructor(private modalService: NgbModal) {}

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
    modalRef.componentInstance.clickevent.subscribe(($e) => {
      console.log($e);
    })
  }
}

動作するプランカーは次のとおりです。 http://plnkr.co/edit/rMJ7qfSSLK0oHspIJbDB?p=preview

サイドノート：exactユースケースはわかりませんが、 Eventエミッターbootstrapモーダルから親へ は、モーダルオープナーとモーダルのコンテンツとして使用されるコンポーネントとの間の好ましい通信方法を示します。

45
pkozlowski.opensource