Comment puis-je fermer un modal dans Angular 2?

Je veux utilisateur, cliquez sur le bouton envoyer et le modal se fermer automatiquement.

Si j'ajoute data-dismiss="modal" dans la Soumettre <button>il ne s'exécute pas submitComments().

J'ai essayé de faire quelque chose comme $('#myModal').modal('hide');mais de ne pas réussir.

Alors, comment puis-je fermer la modale Angulaire 2? Grâce

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form (ngSubmit)="submitComments()">
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

submitComments() {
    //I want to do something like $('#myModal').modal('hide'); here.
}

source d'informationauteur Hongbo Miao

angular bootstrap-modal

En dehors de l' @MattScarpino de répondre à une autre alternative est de simplement changer votre type de bouton button de submit et appelez votre fonction
submitComments() et à l'appel en même temps dismiss-modal.
ce faisant, vous vous en mesure de rejeter modal et de la fonction d'appel en même temps espérant que cela puisse vous aider.
ici est un exemple:

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>

<div id="myModal" class="modal fade">
     <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group row">
                        <label class="form-control-label col-sm-2">Comments:</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="button" (click)='submitComments()' data-dismiss="myModal" class="btn btn-default">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Mise à jour

si vous souhaitez fermer la modale à partir de votre contrôleur de côté, vous pouvez utiliser l'aide de cette façon

$("#myModal").modal("hide");

24

Vous pouvez le faire par le simple fait de déclarer jQuery variable avec n'importe quel type à l'intérieur de Angular2 contrôleur.
```
declare var jQuery:any;
```
Ajouter ce juste après les déclarations d'importation et avant de composant décorateur.

Alors accès modal bootstrap avec son id comme ceci.
```
jQuery("#myModal").modal("hide");
```

À l'aide de @ViewChild

ajouter #closeBtn à l'élément avec data-dismiss="modal"

<a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>

Composant html

<div class="modal fade" id="yourModalId">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <a><i class="fa fa-close" data-dismiss="modal" #closeBtn></i></a>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>

à l'aide de this.closeBtn.nativeElement.click(); pour déclencher l'événement click se fermer votre modal.

Composant tapuscrit

import {ViewChild, ElementRef} from '@angular/core';
@Component({
    moduleId: ...,
    selector: '.',
    templateUrl: '.',
    styleUrls: ['.']
})
export class yourClass {
    @ViewChild('closeBtn') closeBtn: ElementRef;

    yourFunction() {
        //do something
        ...
        ...
        //close your modal
        this.closeModal();
    }

    //call this wherever you want to close modal
    private closeModal(): void {
        this.closeBtn.nativeElement.click();
    }
}

4

Tout d'abord, définir la div à l' hidden propriété est égale à une variable:
```
<div id="myModal" [hidden]="hideModal" class="modal fade">
```
Deuxième, dans la classe, définir un booléen nommé hideModal et le mettre à false:
```
hideModal: boolean = false;
```
Troisième, dans submitComments()ensemble hideModal de vrai.
2

Réponse parfaite dans cet univers.........................

étape 1 : donner l'id unique pour le bouton supprimer de modal

étape 2 : après avoir soumis le formulaire ou la finition de la tâche appel
```
document.getElementById("addProductCloseButton").click();
```
dans votre classe

Essayez de ne pas inclure le formulaire dans votre modal corps au lieu de l'ajout de deux boutons pour les mêmes dans votre section de pied de page.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
    <label class="form-control-label col-sm-2">Comments:</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
            <button type="submit" class="btn btn-primary" >Save changes</button>
          </div>
        </div>
      </div>
    </div>

0

J'ai fait comme ceci et ça fonctionne parfaitement pour moi.
```
var element = document.getElementById("CloseButton") as any;

element.click();
```
Où mon CloseButton est bootstrap bouton fermer.

Vous devez vous connecter pour publier un commentaire.