Angular2 wie Richtlinie in Typoskript refference

Question

ich modal in meinem Code refference wollen, so kann ich show hide rufen, wenn ich es brauche

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

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

@Component({ 
    selector: 'section-modal', 
    directives: [MODAL_DIRECTVES, CORE_DIRECTIVES], 
    viewProviders:[BS_VIEW_PROVIDERS], 
    template: template 
}) 
export class SectionModalComponent { 
    public lgModal: any; 
    show(id){ 
     console.log(this.lgModal); 
     alert("show"+id); 
    } 
} 

Vorlage

<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> 

Ich dachte, dass ich verwenden könnte #lgModal aber das Problem ist, dass diese Variable nur aus der Vorlage sichtbar ist.

Wie kann ich von Typoskript darauf zugreifen?

Answer 1

Versuchen Sie folgendes:

export class SectionModalComponent { 
    @ViewChild('lgModal') lgModal: ElementRef; 
    show(id){ 
     console.log(this.lgModal); //ElementRef 
     console.log(this.lgModal.nativeElement); // HTMLElement 
     alert("show"+id); 
    } 
}