web-dev-qa-db-fra.com

Comment basculer bootstrap 4 modal en utilisant Angular2 Component / Typescript

Je ne peux pas basculer un modal bootstrap en utilisant TypeScript. J'utilise le modal bootstrap 4 Modal. Voici le 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>

Et voici un bouton qui Bootstrap 4 permet de basculer le Modal

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

Je n'utilise pas ce bouton dans ma candidature. Je veux montrer Modal à travers une fonction dans l'un de mes composants Angular 2. J'ai accédé à l'élément html avec le code suivant.

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

Maintenant, je dois activer le modal pour l'afficher à l'aide d'un appel de méthode. Je n'allais pas trouver de solution pour y arriver. J'ai essayé des méthodes comme .show () et d'autres solutions mais aucune n'a fonctionné.

angulartypescript2.0twitter-bootstrap-4
7
Virodh

vous pouvez utiliser @ViewChild() decorator pour obtenir la référence du modal dans le composant, puis l'utiliser avec jQuery pour appeler la méthode .modal() pour ouvrir le modèle à partir de la fonction.

déclarez n'importe quelle variable locale dans votre modèle, par exemple #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>

utilisez-le dans votre composant avec @ViewChild() décorateur.

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

vous pouvez trouver des étapes pour inclure jQuery dans votre projet ici.

Si la méthode .modal() vous donne une erreur en disant que .modal () n'est pas une fonction, déclarez simplement une variable jQuery dans votre fichier de composant comme suit.

declare var jQuery:any;

@Component({
 ...
})
export class YourComponent{
 ...
}
14
HirenParekh

Je suggérerais d'utiliser une bibliothèque dédiée qui fournit une intégration transparente Bootstrap 4 pour Angular 2+. ng-bootstrap a une excellente implémentation modale) où l'ouverture d'un modal avec le contenu d'un composant se résume à:

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

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

Vous pouvez lire la documentation complète ici: https://ng-bootstrap.github.io/#/components/modal et vérifier un exemple en direct avec ce plunk: http: // plnkr. co/edit/vAsduJNgB0x6fWPQudQD? p = preview

7
pkozlowski.opensource

étapes pour basculer (afficher ou masquer) bootstrap modal:

  1. Ajouter ViewChild pour accéder au code modal comme ci-dessous:

    Astuce: notez le code # modal dans la première ligne:

    <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. bouton Ajouter pour afficher le modal dans votre html:

    Astuce: Avis au (click "showModal ()") ==:

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

  3. À l'intérieur de votre composant, mettez ces codes:

    Astuce: Avis à fonction showModal et accès au signe jquery à l'intérieur du composant:

    // jQuery Sign $
declare let $: any;

@Component({
    ...
})
export class YourComponent {
    @ViewChild('modal') modal:ElementRef;

    showModal(){
        // Show modal with jquery
        $(this.modal.nativeElement).modal('show'); 
    }
}
5
user2577907