Comment passer des données pour l'amorçage de dialogue modale dans Angular2

Je suis en train d'afficher une boîte de dialogue dans Angulaire 2 de la demande. Je suis en utilisant le code ci-dessous pour que. Je suis en mesure d'ouvrir la boîte de dialogue et maintenant, j'ai besoin de transmettre les données à la boîte de dialogue, comment puis-je faire ?? J'ai essayé de l'écriture du code JQuery pour faire ça, mais JQuery code ne marche pas pour moi dans le angular2 application.

<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <p>Some text in the modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>

OriginalL'auteur sunny arya | 2016-05-27

  1. 6

    De définir simplement les données de la classe et de se lier à l'interpolation de la syntaxe angulaire {{ }} , Pas besoin d'utiliser extra JQuery comme ceci :- 

    Header: string = 'Angular2+Bootstrap Modal';
Text: string = "Description Here....";

    et utilisé dans le HTML comme ceci:- 

    {{Text}} and {{Header}}

    Travail Plunker

    Alternativement, si vous souhaitez utiliser cette modale en tant que composant et que vous souhaitez transmettre les données que vous pouvez utiliser Eventemitter
    ici est un exemple de Exemple De Travail Avec Eventemitter

    Mise à jour d'établissement de la valeur Dynamique modale des

    Pour Envoyer des données de manière dynamique à l'modale, vous devez créer un composant pour le bootstrap modal.
    que par l'utilisation de @Input() vous êtes en mesure de fixer la valeur dynamique modale comme ceci :-

     @Input() header :any;

<div class="col-sm-12 col-md-6 text-center">
            <a *ngFor='#Number of data'>
                {{Number.id}} &nbsp; &nbsp; {{Number.label}} &nbsp; &nbsp;
                <delete [header]="Number.label" [pk]='Number.id'></delete><br>
            </a>
        </div>

    Travail de Démonstration de Réglage Dynamique de la Valeur Modale

    update2 requête HTTP

    vous avez à faire des requête http dans le ngOnInit crochet angulaire, vous avez déjà vous dynamiques de données que vous pouvez faire la manipulation que vous le souhaitez :-

    ngOnInit() {
    console.log(this.header);   //here is the value that you passed dynamically

    this.http.get('app/cities.json')    //making http request here 
      .map(res => res.json())
      .subscribe(res => console.log(res, "Subscribe Response"))
  }

    Exemple Avec la requête HTTP

    Pardeep, cela fonctionne très bien si vous avez des données statiques. Mais dans mon cas, les données qui doivent être envoyées à la boîte de dialogue modale est dynamique, ce que j'ai est que j'ai une étiquette, et en face de chaque étiquette, il y a un bouton et cliquez sur ce bouton, j'ai besoin d'envoyer la valeur de l'étiquette de mon boîte de dialogue modale.
    Vérifier mes mises à jour réponse @sunnyarya
    grâce pardeep, pouvez-vous s'il vous plaît partager le code sur votre plunkr lien.
    merci, pardeep, je pouvais voir le code qui est là, dans plunker
    pardeep, j'ai besoin de votre aide à nouveau copain. J'ai eu ma dynamique de la valeur que je passe à mon modal composant. Mon exigence est que, en utilisant cette valeur que j'ai passé, je dois faire une requête GET. Pour cela, je vais revenir à ma section de classe dans mon composant. Quand je clique sur le bouton, mon modal div dans mon fichier HTML est affiché mais comment faire pour en venir à ma section de classe de mon composant pour invoquer un service à partir de là. En fait j'ai besoin de prendre l'entrée que j'ai passé, appelez un service d'abord, puis l'afficher mon modale de dialogue avec les données que j'ai reçu de mon service.

    OriginalL'auteur Pardeep Jain

  2. -1

    Vous ne devriez pas avoir à utiliser jquery pour afficher les données dans Angulaire.

    Vous pourriez faire quelque chose comme cela.

    @Component({
  template:`<div class="container">
    <h2>Modal Example</h2>
    <!-- Trigger the modal with a button -->
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{modal.header}}</h4>
                </div>
                <div class="modal-body">
                    <p>{{modal.text}}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

</div>`
})

export class ComponentThatUSESMODAL{
   public modal = {
    "header":"MODAL HEADER",
    "text" : "MODAL TEXT"
   };
   constructor(){}
}
    Gunter, cela fonctionne très bien si vous avez des données statiques. Mais dans mon cas, les données qui doivent être envoyées à la boîte de dialogue modale est dynamique, ce que j'ai est que j'ai une étiquette, et en face de chaque étiquette, il y a un bouton et cliquez sur ce bouton, j'ai besoin d'envoyer la valeur de l'étiquette de mon boîte de dialogue modale

    OriginalL'auteur inoabrian