Как я могу сделать модальный как отдельный компонент в угловом 2?

Question

Я использую эту библиотеку https://github.com/dougludlow/ng2-bs3-modal, чтобы сделать модальности в угловом 2. Мне нужно для моего приложения модальное, но в отдельном компоненте. Пример:

a.component.html является представимыми с помощью кнопки:

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

}