Dialogue angular 2.0 et modal

J’essaie de trouver des exemples sur la façon de faire un dialog modal de confirmation dans Angular 2.0. J’utilise la boîte de dialog Bootstrap pour Angular 1.0 et je ne trouve aucun exemple sur le Web pour Angular 2.0. J’ai aussi vérifié les documents angulars 2.0 sans succès.

Existe-t-il un moyen d’utiliser le dialog Bootstrap avec Angular 2.0?

Merci !

  • Angulaire 2 et plus
  • Bootstrap css (l’animation est préservée)
  • NON JQuery
  • NO bootstrap.js
  • Prend en charge le contenu modal personnalisé (tout comme la réponse acceptée)
  • Prise en charge récente de plusieurs modaux les uns sur les autres .

`

@Component({ selector: 'app-component', template: `   
header
Whatever content you like, form fields, anything
` }) export class AppComponent { } @Component({ selector: 'app-modal', template: ` ` }) export class ModalComponent { public visible = false; public visibleAnimate = false; public show(): void { this.visible = true; setTimeout(() => this.visibleAnimate = true, 100); } public hide(): void { this.visibleAnimate = false; setTimeout(() => this.visible = false, 300); } public onContainerClicked(event: MouseEvent): void { if ((event.target).classList.contains('modal')) { this.hide(); } } }

Pour afficher la canvas de fond , vous aurez besoin de quelque chose comme ce CSS:

 .modal { background: rgba(0,0,0,0.6); } 

L’exemple permet maintenant plusieurs modaux en même temps . (voir la méthode onContainerClicked() ).

Pour les utilisateurs de Bootstrap 4 css , vous devez apporter 1 modification mineure (car un nom de classe css a été mis à jour depuis Bootstrap 3). Cette ligne: [ngClass]="{'in': visibleAnimate}" doit être remplacée par: [ngClass]="{'show': visibleAnimate}"

Pour démontrer, voici un plunkr

Voici un exemple assez correct de la façon dont vous pouvez utiliser le modal Bootstrap dans une application Angular2 sur GitHub .

L’essentiel est que vous pouvez emballer l’initialisation du HTML et du jquery bootstrap dans un composant. J’ai créé un composant modal réutilisable qui vous permet de déclencher une ouverture à l’aide d’une variable de modèle.

       Hello World!    

Il vous suffit d’installer le package npm et d’enregistrer le module modal dans votre module d’application:

 import { Ng2Bs3ModalModule } from 'ng2-bs3-modal/ng2-bs3-modal'; @NgModule({ imports: [Ng2Bs3ModalModule] }) export class MyAppModule {} 

Il s’agit d’une approche simple qui ne dépend pas de jquery ou de toute autre bibliothèque, à l’exception de Angular 2. Le composant ci-dessous (errorMessage.ts) peut être utilisé comme vue enfant de tout autre composant. C’est simplement un modal bootstrap qui est toujours ouvert ou affiché. Sa visibilité est régie par l’instruction ngIf.

errorMessage.ts

 import { Component } from '@angular/core'; @Component({ selector: 'app-error-message', templateUrl: './app/common/errorMessage.html', }) export class ErrorMessage { private ErrorMsg: ssortingng; public ErrorMessageIsVisible: boolean; showErrorMessage(msg: ssortingng) { this.ErrorMsg = msg; this.ErrorMessageIsVisible = true; } hideErrorMsg() { this.ErrorMessageIsVisible = false; } } 

errorMessage.html

  

Ceci est un exemple de contrôle parent (certains codes non pertinents ont été omis pour des raisons de concision):

parent.ts

 import { Component, ViewChild } from '@angular/core'; import { NgForm } from '@angular/common'; import {Router, RouteSegment, OnActivate, ROUTER_DIRECTIVES } from '@angular/router'; import { OnInit } from '@angular/core'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'app-application-detail', templateUrl: './app/permissions/applicationDetail.html', directives: [ROUTER_DIRECTIVES, ErrorMessage] // Note ErrorMessage is a directive }) export class ApplicationDetail implements OnActivate { @ViewChild(ErrorMessage) errorMsg: ErrorMessage; // ErrorMessage is a ViewChild // yada yada onSubmit() { let result = this.permissionsService.SaveApplication(this.Application).subscribe(x => { x.Error = true; x.Message = "This is a dummy error message"; if (x.Error) { this.errorMsg.showErrorMessage(x.Message); } else { this.router.navigate(['/applicationsIndex']); } }); } } 

parent.html

  // your html... 

J’utilise ngx-bootstrap pour mon projet.

Vous pouvez trouver la démo ici

Le github est là

Comment utiliser:

  1. Installez ngx-bootstrap

  2. Importer dans votre module

 // RECOMMENDED (doesn't work with system.js) import { ModalModule } from 'ngx-bootstrap/modal'; // or import { ModalModule } from 'ngx-bootstrap'; @NgModule({ imports: [ModalModule.forRoot(),...] }) export class AppModule(){} 
  1. Modal statique simple
   

Maintenant disponible en paquet NPM

angular-personnalisé-modal


@Stephen Paul suite …

  • Angular 2 et plus Bootstrap css (l’animation est conservée)
  • NON JQuery
  • NO bootstrap.js
  • Prend en charge le contenu modal personnalisé
  • Prise en charge de plusieurs modaux les uns sur les autres.
  • Modularisé
  • Désactiver le défilement lorsque modal est ouvert
  • Modal est détruit en naviguant loin.
  • Initialisation du contenu paresseux, qui obtient ngOnDestroy (ed) lorsque le modal est quitté.
  • Défilement parent désactivé lorsque modal est visible

Initialisation du contenu paresseux

Pourquoi?

Dans certains cas, vous ne voudrez peut-être pas modal pour conserver son statut après avoir été fermé, mais plutôt restauré à son état initial.

Problème modal original

Passer le contenu directement dans la vue génère en fait l’initialisation avant même que le modal ne l’obtienne. Le modal n’a pas le moyen de tuer un tel contenu, même si vous utilisez un wrapper *ngIf .

Solution

ng-template . ng-template ne s’affiche pas avant d’avoir reçu l’ordre de le faire.

my-component.module.ts

 ... imports: [ ... ModalModule ] 

my-component.ts

          

modal.component.ts

 export class ModalComponent ... { @ContentChild('header') header: TemplateRef; @ContentChild('body') body: TemplateRef; @ContentChild('footer') footer: TemplateRef; ... } 

modal.component.html

 
...

Les références

Je dois dire que cela n’aurait pas été possible sans l’excellente documentation officielle et communautaire sur le net. Cela pourrait aider certains d’entre vous à mieux comprendre le fonctionnement de ng-template , *ngTemplateOutlet et @ContentChild .

https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

Solution complète de copier-coller

modal.component.html

  

modal.component.ts

 /** * @Stephen Paul https://stackoverflow.com/a/40144809/2013580 * @zurfyx https://stackoverflow.com/a/46949848/2013580 */ import { Component, OnDestroy, ContentChild, TemplateRef } from '@angular/core'; @Component({ selector: 'app-modal', templateUrl: 'modal.component.html', styleUrls: ['modal.component.scss'], }) export class ModalComponent implements OnDestroy { @ContentChild('header') header: TemplateRef; @ContentChild('body') body: TemplateRef; @ContentChild('footer') footer: TemplateRef; public visible = false; public visibleAnimate = false; ngOnDestroy() { // Prevent modal from not executing its closing actions if the user navigated away (for example, // through a link). this.close(); } open(): void { document.body.style.overflow = 'hidden'; this.visible = true; setTimeout(() => this.visibleAnimate = true, 200); } close(): void { document.body.style.overflow = 'auto'; this.visibleAnimate = false; setTimeout(() => this.visible = false, 100); } onContainerClicked(event: MouseEvent): void { if ((event.target).classList.contains('modal')) { this.close(); } } } 

modal.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ModalComponent } from './modal.component'; @NgModule({ imports: [ CommonModule, ], exports: [ModalComponent], declarations: [ModalComponent], providers: [], }) export class ModalModule { } 

Voici mon implémentation complète du composant modulaire bootstrap angular2:

Je suppose que dans votre fichier index.html principal (avec les balises et ) au bas de la vous avez:

    

modal.component.ts:

 import { Component, Input, Output, ElementRef, EventEmitter, AfterViewInit } from '@angular/core'; declare var $: any;// this is very importnant (to work this line: this.modalEl.modal('show')) - don't do this (becouse this owerride jQuery which was changed by bootstrap, included in main html-body template): let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js'); @Component({ selector: 'modal', templateUrl: './modal.html', }) export class Modal implements AfterViewInit { @Input() title:ssortingng; @Input() showClose:boolean = true; @Output() onClose: EventEmitter = new EventEmitter(); modalEl = null; id: ssortingng = uniqueId('modal_'); constructor(private _rootNode: ElementRef) {} open() { this.modalEl.modal('show'); } close() { this.modalEl.modal('hide'); } closeInternal() { // close modal when click on times button in up-right corner this.onClose.next(null); // emit event this.close(); } ngAfterViewInit() { this.modalEl = $(this._rootNode.nativeElement).find('div.modal'); } has(selector) { return $(this._rootNode.nativeElement).find(selector).length; } } let modal_id: number = 0; export function uniqueId(prefix: ssortingng): ssortingng { return prefix + ++modal_id; } 

modal.html:

  

Et exemple d’utilisation dans le composant éditeur du client: client-edit-component.ts:

 import { Component } from '@angular/core'; import { ClientService } from './client.service'; import { Modal } from '../common'; @Component({ selector: 'client-edit', directives: [ Modal ], templateUrl: './client-edit.html', providers: [ ClientService ] }) export class ClientEdit { _modal = null; constructor(private _ClientService: ClientService) {} bindModal(modal) {this._modal=modal;} open(client) { this._modal.open(); console.log({client}); } close() { this._modal.close(); } } 

client-edit.html:

 {{ bindModal(editModal) }} Som non-standart title Some contents   

Ofcourse title , showClose , et sont des parameters / balises facultatifs.

J’ai récemment blogué à ce sujet ..

J’ai créé un service réutilisable qu’un composant peut avoir injecté. Une fois injecté, le composant peut communiquer avec le service, qu’il soit sale ou lié au routeur.

https://long2know.com/2017/01/angular2-menus-navigation-and-dialogs/ https://long2know.com/2017/01/angular2-dialogservice-exploring-bootstrap-part-2/

Vérifiez le dialog ASUI qui crée à l’exécution. Il n’y a pas besoin de cacher et de montrer la logique. Le service créera simplement un composant à l’exécution en utilisant AOT ASUI NPM

essayez d’utiliser ng-window, il permet aux développeurs d’ouvrir et de contrôler de manière simple plusieurs fenêtres dans des applications à une seule page, No Jquery, No Bootstrap.

entrer la description de l'image ici

Confiscation Avilable

  • Fenêtre Maxmize
  • Réduire la fenêtre
  • Format personnalisé,
  • Posation personnalisée
  • la fenêtre est glissable
  • Bloquer la fenêtre parente ou non
  • Centrer la fenêtre ou non
  • Passer les valeurs à la fenêtre de protection
  • Passer les valeurs de la fenêtre de protection à la fenêtre parente
  • Écoute de la fermeture de la fenêtre de protection dans la fenêtre parente
  • Écoutez le redimensionnement d’un événement avec votre écouteur personnalisé
  • Ouvert avec la taille maximale ou non
  • Activer et désactiver le redimensionnement de la fenêtre
  • Activer et désactiver la maximisation
  • Activer et désactiver la minimisation