コンポーネントの関数をAngular2の他のコンポーネントから呼び出す方法は？

Question

私はAngularでWebアプリケーションを開発しています。

editor-componentというコンポーネントがあり、エディタを操作するいくつかの関数（たとえば、getValue()）が含まれているという問題があります。他のコンポーネントでは、editor-componentの関数を呼び出す必要がありますが、コンポーネント間の関係は親子ではありません。ngx-bootstrapでモーダルを使用しています。

私の問題は、他のすべてのコンポーネントにeditor-componentの機能を使用させることができますか？

Answer 1

editor-componentから関数を格納するサービスを使用しようとします。 モーダルはやや難しくなります。ブートストラップデモのコード：

<button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button> 
<pre *ngFor="let message of messages">{{message}}</pre> 

<div class="modal fade" bsModal #modal="bs-modal" tabindex="-1" role="dialog" 
    aria-labelledby="mySmallModalLabel" aria-hidden="true" 
    (onShow)="handler('onShow', $event)" 
    (onShown)="handler('onShown', $event)" 
    (onHide)="handler('onHide', $event)" 
    (onHidden)="handler('onHidden', $event)"> 
    <div class="modal-dialog modal-sm"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title pull-left">Modal</h4> 
     <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     Just another modal <br> 
     Click <b>&times;</b>, press <code>Esc</code> or click on backdrop to close modal. 
     </div> 
    </div> 
    </div> 
</div> 

このモーダルはコンポーネントスコープの内側です。この＃modal = "bs-modal"では変数 "modal"を使用してモーダルのコンテキストを使用することができます 詳細http://valor-software.com/ngx-bootstrap/#/modals

Answer 2

OK、最後に解決策を得ました。

これは、2つのフィールドを持つ共有サービスを使用して、既存のサービスと何とか似ています。 editorServiceで

は、getContentEventを設定し、フィールドcontent : stringを設定し、両方editorComponent及びotherComponentにイベントを登録します。イベントが発生すると、editorComponentでイベントを購読し、contentをサービス中に設定すると、他のコンポーネントはcontentを取得できます。