角度2で別のコンポーネントとしてモーダルを作成するにはどうすればよいですか？

Question

私はこのライブラリhttps://github.com/dougludlow/ng2-bs3-modalを使って角2でモーダルを作成しています。 私のアプリケーションにはモーダルが必要ですが、別のコンポーネントが必要です。 例：

a.component.htmlはボタンでrepresentatedさ：

<button type="button" class="btn btn-default" (click)="modal.open()">Open me!</button> 

とb.component.htmlがモーダルで表されます。

<modal #modal> 
    <modal-header> 
     <h4 class="modal-title">I'm a modal!</h4> 
    </modal-header> 
    <modal-body> 
     Hello World! 
    </modal-body> 
    <modal-footer> 
     <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Cancel</button> 
     <button type="button" class="btn btn-primary" (click)="modal.close()">Ok</button> 
    </modal-footer> 
</modal> 

は、私は何を書くべきts？ あなたはplunkrで私を助けてもらえますか？ 感謝:)

Answer 1

1）a.component：

import {b_component} from './{YOUR_COMPONENT_PATH}'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <button type="button" class="btn btn-default" (click)="open()">Open me!</button> 
    <{YOURS_SELECTOR_OF_B_COMPONENT}></{YOURS_SELECTOR_OF_B_COMPONENT}> 
    `, 
}) 
export class App { 
    @ViewChild(b_component) 
    modalHtml: b_component; 

    open() { 
     this.modalHtml.open(); 
    } 
    constructor() { 
    } 
} 

b.component：

import { Ng2Bs3ModalModule, ModalComponent } from 'ng2-bs3-modal/ng2-bs3-modal'; 
@Component({ 
    selector: 'my-modal', 
    template: ` 
    <modal #modal> 
    <modal-header [show-close]="true"> 
     <h4 class="modal-title">I'm a modal!</h4> 
    </modal-header> 
    <modal-body> 
     Hello From new Component!! 
    </modal-body> 
    <modal-footer [show-default-buttons]="true"></modal-footer> 
</modal> 
    ` 
}) 
export class b_component { 
    constructor() { 
    } 
    @ViewChild('modal') 
    modal: ModalComponent; 
    open(){ 
     this.modal.open(); 
    } 

}