如何從角度2中的類的編碼部分達到模板中的模態

Question

我有一個稱爲成功模式的組件。我想使用代碼部分在該組件內部訪問div。任何想法如何我可以實現這一目標？

successModal.component.html

<div bsModal #successModalAccessor="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog modal-success" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title">Modal title</h4> 
     <button type="button" class="close" (click)="successModalAccessor.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <p>One fine body&hellip;</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" (click)="successModalAccessor.hide()">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div><!-- /.modal-content --> 
    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

successModal.component.ts

import { Component } from '@angular/core'; 
import { ModalModule } from 'ng2-bootstrap/modal'; 

    @Component({ 
     selector:'SuccessModal', 
     templateUrl: 'successModal.component.html' 
    }) 

    export class SuccessModalComponent { 


     showSuccess(){ 
      //i would like to do something like successModalAccessor.show(); 
     } 
    } 

Answer 1

我發現我用下面viewChild

@ViewChild('successModalAccessor') successModalElement:ModalDirective 

而且在功能

showSuccess(){ 
      this.successModalElement.show(); 
} 

Answer 2

使用ViewChild

<div class="modal-header" #theDivThatYouWant> 
     <h4 class="modal-title">Modal title</h4> 
     <button type="button" class="close" (click)="successModalAccessor.hide()" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 


inside the component 

@ViewChild('theDivThatYouWant') theDivThatYouWant:ElementRef 

theDivThatYouWant類型爲ElementRef在這種情況下，如果你想要實際的html元素，你必須說：

myFunctionThatNeedsThatDiv(){ 
    let divElement = this.theDivThatYouWant.nativeElement; 

    }