データモーダルコンポーネントを親に渡す方法角度4のng-bootstrapを使用するコンポーネント

Question

以下のコードを、モーダルコンポーネントから親コンポーネントへのデータの受け渡しに使用しました。

package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3" 

app.component.html

<button class="btn btn-primary" (click)="openModal()">Open</button> 

app.component.ts

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; 

export class AppComponent { 

    constructor(private modalService: NgbModal) { } 

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

APP-modal.component.html

<h1>{{data}}</h1> 
<button class="btn btn-primary" (click)="addMe()"></button> 

APP-modal.component.ts

import { Component, Output, EventEmitter } from '@angular/core'; 

export class AppModalComponent { 
    private data: string; 
    @Output emitService = new EventEmitter(); 

    constructor() { 
     this.data = "hello world"; 
    } 

    addMe() { 
     this.emitService.next(this.data) 
    } 
} 

EMIT後、親コンポーネント（app.component）のデータを取得する方法？あなたはとても似emitService@Outputを購読することができ

Answer 1

：上記は動作しますが

openModal() { 
    const modalRef = this.modalService.open(AppModalComponent); 
    modalRef.componentInstance.emitService.subscribe((emmitedValue) => { 
     // do sth with emmitedValue 
    }); 
} 

、それは通常、あなたが返すようにしたい値を持つだけ近いモーダルが容易であることに注意してください。これはmodalRefで利用可能な約束を解決します。詳細はhttps://stackoverflow.com/a/43614501/1418796