Wie kann ich bootstrap 4 modal umschalten mit Angular2 Component/Typescript

Question

Ich bin nicht in der Lage, ein Bootstrap modal mit Typescript umschalten. Ich verwende den Standard Bootstrap 4 Modal. Hier ist der Code.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Und hier ist eine Schaltfläche, die Bootstrap 4 der Modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

ich in meiner Anwendung auf diese Schaltfläche bin nicht mit hin- und herzuschalten bietet. Ich möchte Modal durch eine Funktion in einer meiner Angular 2 Komponenten zeigen. Ich habe auf das HTML-Element mit dem folgenden Code zugegriffen.

ngOnInit() { 
    this.modalElement = document.getElementById('myModal'); 
    } 

Jetzt muss ich das Modal aktivieren, um es mit einem Methodenaufruf anzuzeigen. Ich war nicht dabei, eine Lösung dafür zu finden. Ich habe Methoden wie .show() und andere Lösungen ausprobiert, aber keine funktionierte.

Answer 1

können Sie @ViewChild() Dekorator verwenden, um die Referenz von Modal in Komponente zu erhalten und dann mit jQuery .modal() Methode aufrufen, um Modell aus der Funktion zu öffnen.

deklarieren Sie eine beliebige lokale Variable in Ihrer Vorlage, z. B. #myModal.

<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

Verwenden Sie es in Ihrer Komponente mit @ViewChild() Dekorateur.

import { ViewChild } from '@angular/core'; 
import { ElementRef } from '@angular/core'; 
@Component({ 
    ... 
}) 
export class YourComponent { 
    @ViewChild('myModal') myModal:ElementRef; 

    yourFunction(){ 
    //open modal using jQuery 
    jQuery(this.myModal.nativeElement).modal('show'); 
    } 
} 

Sie Schritte umfassen jQuery in Ihrem Projekt here.

Bei sagen .modal Sie Fehler, wenn .modal() Methode gibt() ist keine Funktion, erklären nur eine jQuery Variable in der Komponentendatei finden kann folgt.

Answer 2

Ich würde vorschlagen, eine dedizierte Bibliothek, die nahtlose Bootstrap 4 Integration für Angular 2+ bietet.ng-bootstrap verfügt über hervorragende Verkehrs Implementierung, bei der aus einer Komponente mit einem modal mit Inhalt zu öffnen, um läuft darauf hinaus:

@Component({ 
    selector: 'ngbd-modal-component', 
    templateUrl: './modal-component.html' 
}) 
export class NgbdModalComponent { 
    constructor(private modalService: NgbModal) {} 

    open() { 
    const modalRef = this.modalService.open(MyContent); 
    } 
} 

Sie können eine vollständige Dokumentation hier lesen: https://ng-bootstrap.github.io/#/components/modal und prüfen Sie ein Live-Beispiel mit diesem zupfen: http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview

Answer 3

3 Schritt hin- und herzuschalten (ein- oder ausblenden) Bootstrap-modal:

1. hinzufügen ViewChild zu Zube ss zum modalen wie unten Code:

   Tipp: Hinweis auf die #modal in Code in der ersten Zeile:

   <div class="modal fade" #modal> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <form> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
           <header class="font-12 bold">Modal Header</header> 
          </div> 
          <div class="modal-body"> 
           Your Content ... 
          </div> 
          <div class="modal-footer"> 
           <button type="submit" class="btn btn-primary">Save</button> 
           <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> 
          </div> 
         </form> 
        </div> 
       </div> 
   </div> 
   

2. Button In für das Zeigen modal in Ihrem html :

   Tipp: Hinweis auf die (Klick) = "ShowModal()" :

   <button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button> 
   

3. In Ihrer Komponente dieses Codes setzen:

   Tipp: innerhalb Komponente ShowModal Funktion und Zugriff auf jquery Zeichen Hinweis:

   // jQuery Sign $ 
   declare let $: any; 
   
   @Component({ 
       ... 
   }) 
   export class YourComponent { 
       @ViewChild('modal') modal:ElementRef; 
   
       showModal(){ 
        // Show modal with jquery 
        $(this.modal.nativeElement).modal('show'); 
       } 
   }