2016-06-02 3 views
1

에서 열기 내가 구성 요소에서 대화 상자를 엽니 다 싶습니다NG2 - bootstap - 모델 - 구성 요소

<!-- Large modal --> 
<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button> 

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     <h4 class="modal-title">Large modal</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
    </div> 
    </div> 
</div> 

lgModal.show() bsModel입니다 내가 대화 상자를 열고 어떻게 대화 상자가 열립니다 구성 요소 :

import {Component} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 

// todo: change to ng2-bootstrap 
import {MODAL_DIRECTVES, BS_VIEW_PROVIDERS} from '../../../ng2-bootstrap'; 
// webpack html imports 
let template = require('./modal-demo.html'); 

@Component({ 
    selector: 'modal-demo', 
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES], 
    viewProviders:[BS_VIEW_PROVIDERS], 
    template: template 
}) 
export class ModalDemoComponent { 

} 

구성 요소에서 lgModal.show()와 같은 작업을 수행 할 수 없습니까?

답변

4

이 구성 요소의 클래스 구현이 추가 사전에

감사 :

@ViewChild('lgModal') bgModel;

이 그럼 당신은 this.bgModel와 클래스에서 참조 할 수 있습니다.

행운을 빕니다

+0

더 정확한 예를 들려 줄 수 있습니까? –

+0

내 대답이 업데이트되었습니다. – kernix

+0

주석을 달 수있는 유형이 있습니까? 나는 이런 것들을 위해 어떤 것을 사용하는 것을 싫어한다. 감사합니다. – Hector

관련 문제