Dialogue modal d'Angular 2
- Qu’est-ce que le dialogue modal dans Angular 2
- Importer les bibliothèques pour créer une boîte de dialogue modale dans Angular 2
- Service modal pour créer une boîte de dialogue modale dans Angular 2
- Composant modal personnalisé pour créer une boîte de dialogue modale dans Angular 2
Angular 2.0 est la dernière version du framework JavaScript populaire. Il fournit aux développeurs une nouvelle architecture basée sur des composants, prend en charge les appareils mobiles et est écrit en TypeScript.
Les boîtes de dialogue modales sont des fenêtres qui s’affichent au-dessus de la fenêtre actuelle et bloquent l’interaction jusqu’à leur fermeture. Cet article expliquera en détail la boîte de dialogue modale Angular 2.0.
Qu’est-ce que le dialogue modal dans Angular 2
Pour aider les développeurs à créer des applications Web plus dynamiques et interactives, Angular 2.0 a introduit un nouveau composant appelé Modal Dialog.
Les termes dialogue modal et fenêtre modale peuvent sembler confus, mais ils ne le sont pas. La plupart des gens se réfèrent à une fenêtre modale comme une fenêtre contextuelle par défaut.
La boîte de dialogue modale permet aux développeurs de créer une variété de boîtes de dialogue avec un contenu riche et des animations. Il peut être utilisé de différentes manières, par exemple :
- Pour inviter l’utilisateur en demandant une entrée.
- Pour afficher les messages ou notifications importants.
- Pour afficher les messages d’erreur ou les messages de confirmation.
Cliquez ici si vous voulez en savoir plus sur le dialogue modal.
Divisons notre travail comme suit pour plus de simplicité.
- Ajouter les bibliothèques
- Services modaux
- Composante modale
Pour des raisons de style, nous avons utilisé Bootstrap.
Importer les bibliothèques pour créer une boîte de dialogue modale dans Angular 2
Importez les bibliothèques suivantes dans le fichier index.html pour améliorer les fonctionnalités de votre code.
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
Après cela, notre principale préoccupation est de compiler le code. Vous ne pouvez pas compiler directement des éléments dans le DOM avec Angular 2 ; vous avez besoin d’un espace réservé.
C’est pourquoi nous avons créé un espace réservé modal. Gardez à l’esprit que c’est l’étape la plus importante pour commencer.
@Component({
selector: "modal-placeholder",
template: `<div #modalplaceholder></div>`
})
export class ModalPlaceholderComponent implements OnInit {
@ViewChild("modalplaceholder", {read: ViewContainerRef}) viewContainerRef;
Service modal pour créer une boîte de dialogue modale dans Angular 2
Nous nous dirigeons vers la deuxième étape, également appelée étape racine. L’objectif principal du service modal est de faciliter la communication entre les composants sur la page et les composants modaux.
Le service modal garde également une trace des modaux disponibles sur la page et de la manière d’interagir avec eux.
import {Component,NgModule, ViewChild, OnInit, ViewContainerRef, Compiler, ReflectiveInjector, Injectable, Injector, ComponentRef} from "@angular/core";
import {Observable, Subject, BehaviorSubject, ReplaySubject} from "rxjs/Rx";
@Injectable()
export class ModalService {
private vcRef: ViewContainerRef;
private injector: Injector;
public activeInstances: number;
constructor(private compiler: Compiler) {
}
registerViewContainerRef(vcRef: ViewContainerRef): void {
this.vcRef = vcRef;
}
registerInjector(injector: Injector): void {
this.injector = injector;
}
create<T>(module: any, component: any, parameters?: Object): Observable<ComponentRef<T>> {
let componentRef$ = new ReplaySubject();
this.compiler.compileModuleAndAllComponentsAsync(module)
.then(factory => {
let componentFactory = factory.componentFactories.filter(item => item.componentType === component)[0];
const childInjector = ReflectiveInjector.resolveAndCreate([], this.injector);
let componentRef = this.vcRef.createComponent(componentFactory, 0, childInjector);
Object.assign(componentRef.instance, parameters);
this.activeInstances ++;
componentRef.instance["com"] = this.activeInstances;
componentRef.instance["destroy"] = () => {
this.activeInstances --;
componentRef.destroy();
};
componentRef$.next(componentRef);
componentRef$.complete();
});
return <Observable<ComponentRef<T>>> componentRef$.asObservable();
}
}
@Component({
selector: "modal-placeholder",
template: `<div #modalplaceholder></div>`
})
export class ModalPlaceholderComponent implements OnInit {
@ViewChild("modalplaceholder", {read: ViewContainerRef}) viewContainerRef;
constructor(private modalService: ModalService, private injector: Injector) {
}
ngOnInit(): void {
this.modalService.registerViewContainerRef(this.viewContainerRef);
this.modalService.registerInjector(this.injector);
}
}
@NgModule({
declarations: [ModalPlaceholderComponent],
exports: [ModalPlaceholderComponent],
providers: [ModalService]
})
export class ModalModule {
}
export class ModalContainer {
destroy: Function;
componentIndex: number;
closeModal(): void {
this.destroy();
}
}
export function Modal() {
return function (world) {
Object.assign(world.prototype, ModalContainer.prototype);
};
}
Qu’est-ce que RxJS ?
RxJS (Reactive Extensions for JavaScript) est une suite de modules qui vous permet de créer des programmes asynchrones et basés sur des événements en JavaScript en utilisant des tableaux et une composition visibles.
Composant modal personnalisé pour créer une boîte de dialogue modale dans Angular 2
La directive modale personnalisée peut ajouter des modaux dans une application Angular à l’aide de la balise <modal>.
Lorsqu’une instance modale se charge, elle s’enregistre auprès du ModalService afin que le service puisse ouvrir et fermer les fenêtres modales. Il se désinscrit du ModalService lorsqu’il est détruit à l’aide de la méthode Destroy.
import {Modal} from "./modal.module";
import {Component} from "@angular/core";
@Component({
selector: "my-cust",
template: `
<h1>Basic Components of a Car</h1>
<button (click)="onDelete()">×</button>
<ul>
<li *ngFor="let option of options">{{option}}</li>
</ul>
<div>
<button (click)="onDelete()">
<span>Delete</span>
</button>
<button (click)="onSave()">
<span>Save</span>
</button>
</div>
`
})
@Modal()
export class ModalComponent {
ok: Function;
destroy: Function;
closeModal: Function;
options = ["Speed", "Mileage", "Color"];
onDelete(): void{
this.closeModal();
this.destroy();
}
onSave(): void{
this.closeModal();
this.destroy();
this.ok(this.options);
}
}
Enfin, le code index.html est donné ci-dessous.
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://npmcdn.com/zone.js@0.6.12?main=browser"></script>
<script src="https://npmcdn.com/reflect-metadata@0.1.3"></script>
<script src="https://npmcdn.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-hoop>Loading...</my-hoop>
</body>
</html>
C’est donc la façon de créer un modal dans Angular 2. Le code est maintenable, flexible et facile à utiliser. Cliquez ici pour vérifier la démonstration en direct du code.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook