Angulaire 2 fenêtre popup
Je suis en train de créer une fenêtre pop-up qui demande des informations de connexion sur le bouton cliquez sur.
mon application.composant ressemble
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: `mytemplate.html`
})
export class AppComponent {}
dans index.html j'ai fait référence à jquery et bootstrap
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
mytemplate.html:
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">start here</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="login-form">
<div class="modal-body">
<input id="username" type="text" placeholder="Username" >
<input id="password" type="password" placeholder="Password">
</div>
<div class="modal-footer">
<div>
<button type="submit" class="btn btn-primary btn-lg btn-block">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Cela fonctionne parfaitement pour moi . mais je veux savoir est-il possible de faire la même purement à l'Aide de angular2-modal ? si oui quelqu'un peut-il me guider comment faire.
OriginalL'auteur ani | 2017-01-20
Vous devez vous connecter pour publier un commentaire.
J'ai utilisé angular2/modal et de sa bonne. Vous devez créer une fenêtre modale pour atteindre la sortie du haut-code. Placez votre code de Connexion dans une composante distincte (login.composante.ts) et ensuite utiliser ce composant comme une coutume modal.
Suivre cette plunker: http://embed.plnkr.co/mbPzd8/ . Assurez-vous d'utiliser [email protected] et ajouter le angular2-modale module dans votre AppModule après l'installation.
Créer un compte de Connexion du composant avec les éléments suivants ts et modèle:
Et maintenant dans l'app composant, permet d'appeler cette fenêtre modale.
fait-il résolu votre problème?
Je suis confronté à quelques problèmes de chargement de la angular2-modal popup.Après la compilation lorsque j'essaie de lancer l'application, il est en train d'évaluer le fichier dans le chemin de "l'Évaluation de localhost:49928/lib/angular2-modal/plugins/bootstrap.js" Mais dans l'emplacement spécifié lib/angular2-modal/plugins/ le fichier n'existe pas et donc, l'application est plantage. Des idées pourquoi j'obtiens cette erreur? Pourquoi il est à la recherche d'bootstrap.js fichier sous angular2-modal? stackoverflow.com/questions/44600236/...
OriginalL'auteur Noor Ahmed
Oui il est, mais il pourrait être plus facile à utiliser que des composants tiers tels que PrimeNg...
http://www.primefaces.org/primeng/#/dialog
Il fournit un facile à utiliser composant contextuel.
Si vous ne pouvez pas utiliser une 3ème partie composant que vous pouvez simplement utiliser les styles css pour faire un div agir comme le popup. Quand on clique sur un bouton sur la page faire de la div visibles à l'aide d' *ngIf. La div contient un bouton pour la fermeture du div si visible.
Vous pouvez utiliser les styles css qui sont mentionnés dans ce blog...
http://www.w3schools.com/howto/howto_css_modals.asp
J'ai ajouté à la réponse ci-dessus.
merci @ben je vais certainement vérifier
c'est une mauvaise approche pour le faire. À l'aide de n'importe quel paquet comme angular2-modale ou ngPrime dialogue est mieux, je pense. Aussi, il est nécessaire d'éviter tout *ngIf instructions sur la boîte de dialogue de divs et de gérer l'ouverture et la fermeture de la boîte de dialogue correctement en utilisant soit des fonctions fournies par le package eux-même ou par la saisie de l'utilisateur
OriginalL'auteur Ben Cameron