Angolare 2.0 e finestra di dialogo modale

Sto cercando di trovare alcuni esempi su come eseguire una finestra di dialogo modale di conferma in Angular 2.0. Ho utilizzato la finestra di dialogo Bootstrap per Angular 1.0 e non sono riuscito a trovare alcun esempio nel web per Angular 2.0. Ho anche controllato i documenti angular 2.0 senza fortuna.

C’è un modo per usare la finestra di dialogo Bootstrap con Angular 2.0?

Grazie !

  • Angolare 2 e fino
  • Bootstrap css (l’animazione è preservata)
  • NO JQuery
  • NESSUN bootstrap.js
  • Supporta contenuti modali personalizzati (proprio come la risposta accettata)
  • Supporto aggiunto di recente per più modali uno sopra l’altro .

`

@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(); } } }

Per mostrare lo sfondo , avrai bisogno di qualcosa come questo CSS:

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

L’esempio ora consente più modali allo stesso tempo . (vedi il metodo onContainerClicked() ).

Per gli utenti di Bootstrap 4 css , è necessario apportare 1 modifica minore (poiché un nome di class css è stato aggiornato da Bootstrap 3). Questa riga: [ngClass]="{'in': visibleAnimate}" dovrebbe essere cambiato in: [ngClass]="{'show': visibleAnimate}"

Per dimostrare, ecco un plunkr

Ecco un esempio abbastanza decente di come puoi usare il modal Bootstrap all’interno di un’app Angular2 su GitHub .

L’essenza di questo è che è ansible avvolgere l’inizializzazione html bootstrap e jquery in un componente. Ho creato un componente modal riutilizzabile che consente di triggersre un open utilizzando una variabile del modello.

       Hello World!    

Devi solo installare il pacchetto npm e registrare il modulo modale nel modulo dell’app:

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

Questo è un approccio semplice che non dipende da jquery o da qualsiasi altra libreria tranne Angular 2. Il componente sottostante (errorMessage.ts) può essere usato come una vista secondaria di qualsiasi altro componente. È semplicemente un modal bootstrap che è sempre aperto o mostrato. La visibilità è governata dall’istruzione ngIf.

errorMessage.ts

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

errorMessage.html

  

Questo è un esempio di controllo genitore (alcuni codici non rilevanti sono stati omessi per brevità):

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... 

Io uso ngx-bootstrap per il mio progetto.

Puoi trovare la demo qui

Il github è qui

Come usare:

  1. Installa ngx-bootstrap

  2. Importa nel tuo modulo

 // 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. Semplice modale statico
   

Ora disponibile come pacchetto NPM

angular-custom-modale


@ Stefano Paul continua …

  • Angular 2 e fino Bootstrap css (l’animazione è preservata)
  • NO JQuery
  • NESSUN bootstrap.js
  • Supporta contenuti modali personalizzati
  • Supporto per più modali uno sopra l’altro.
  • Moduralized
  • Disabilita scroll quando modal è aperto
  • Il modale viene distrutto durante la navigazione.
  • Inizializzazione del contenuto pigro, che ottiene ngOnDestroy (ed) quando si esce dal modale.
  • Scorrimento genitore disabilitato quando è visibile la modal

Inizializzazione del contenuto pigro

Perché?

In alcuni casi potresti non volere il modale per mantenere il suo stato dopo essere stato chiuso, ma ripristinato allo stato iniziale.

Problema modale originale

Passare il contenuto direttamente nella vista genera effettivamente l’inizializza anche prima che la modale la ottenga. Il modale non ha un modo per uccidere tali contenuti anche se si utilizza un wrapper *ngIf .

Soluzione

ng-template . ng-template non esegue il rendering fino a quando non viene ordinato di farlo.

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

 
...

Riferimenti

Devo dire che non sarebbe stato ansible senza l’eccellente documentazione ufficiale e comunitaria in rete. Potrebbe aiutare alcuni di voi a capire meglio come funzionano ng-template , *ngTemplateOutlet e @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

Soluzione completa per copia e incolla

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 { } 

Ecco la mia piena implementazione del componente modal bootstrap angular2:

Presumo che nel tuo file index.html principale (con e ) nella parte inferiore del tag hai:

    

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:string; @Input() showClose:boolean = true; @Output() onClose: EventEmitter = new EventEmitter(); modalEl = null; id: string = 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: string): string { return prefix + ++modal_id; } 

modal.html:

  

E esempio di utilizzo nel componente Editor 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 , e ar parametri / tag opzionali.

Recentemente ho bloggato su questo ..

Ho creato un servizio riutilizzabile che un componente può aver iniettato. Una volta iniettato, il componente può comunicare al servizio se si trova in uno stato di sporcizia e legarsi alla navigazione del router.

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

Controlla la finestra di dialogo ASUI che crea in fase di esecuzione. Non c’è bisogno di hide e mostrare la logica. Semplicemente il servizio creerà un componente in fase di esecuzione utilizzando AOT ASUI NPM

prova ad usare ng-window, è permettere allo sviluppatore di aprire e controllare più windows in applicazioni a singola pagina in modo semplice, senza Jquery, senza Bootstrap.

inserisci la descrizione dell'immagine qui

Configrazione disponibile

  • Maxmize window
  • Riduci a icona la finestra
  • Formato personalizzato,
  • Posizione personalizzata
  • la finestra è trascinabile
  • Blocca finestra padre o no
  • Centra la finestra o no
  • Passa i valori alla finestra di chield
  • Passa i valori dalla finestra Chield alla finestra principale
  • Ascoltando la chiusura della finestra di ricerca nella finestra principale
  • Ascolta l’evento di ridimensionamento con il tuo listener personalizzato
  • Aperto con dimensioni massime o meno
  • Abilita e disabilita il ridimensionamento della finestra
  • Abilita e disabilita la massimizzazione
  • Abilita e disabilita la minimizzazione