Diálogo modal Angular 2
- ¿Qué es el diálogo modal en Angular 2?
- Importe las bibliotecas para crear un diálogo modal en Angular 2
- Servicio modal para crear un diálogo modal en Angular 2
- Componente modal personalizado para crear un cuadro de diálogo modal en Angular 2
Angular 2.0 es la última versión del popular marco de JavaScript. Proporciona a los desarrolladores una nueva arquitectura basada en componentes, es compatible con dispositivos móviles y está escrito en TypeScript.
Los diálogos modales son ventanas que aparecen encima de la ventana actual y bloquean la interacción hasta que se cierran. Este artículo explicará en detalle el diálogo modal de Angular 2.0.
¿Qué es el diálogo modal en Angular 2?
Para ayudar a los desarrolladores a crear aplicaciones web más dinámicas e interactivas, Angular 2.0 introdujo un nuevo componente llamado Modal Dialog.
Los términos diálogo modal y ventana modal pueden parecer confusos, pero no lo son. La mayoría de la gente se refiere a una ventana modal como una ventana emergente por defecto.
El diálogo modal permite a los desarrolladores crear una variedad de diálogos con contenido y animaciones enriquecidos. Se puede utilizar de diferentes maneras, por ejemplo:
- Para solicitar al usuario una entrada.
- Para mostrar mensajes o notificaciones importantes.
- Para mostrar mensajes de error o mensajes de confirmación.
Haga clic aquí si desea obtener más información sobre el diálogo modal.
Dividamos nuestro trabajo en lo siguiente para simplificar.
- Agregue las bibliotecas
- Servicios Modales
- Componente modal
Para propósitos de estilo, usamos Bootstrap.
Importe las bibliotecas para crear un diálogo modal en Angular 2
Importe las siguientes bibliotecas en el archivo index.html para mejorar la funcionalidad de su código.
<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>
Después de esto, nuestra principal preocupación es compilar el código. No puede compilar cosas directamente en el DOM con Angular 2; necesitas un marcador de posición.
Es por eso que hicimos un marcador de posición modal. Tenga en cuenta que este es el paso más importante para empezar.
@Component({
selector: "modal-placeholder",
template: `<div #modalplaceholder></div>`
})
export class ModalPlaceholderComponent implements OnInit {
@ViewChild("modalplaceholder", {read: ViewContainerRef}) viewContainerRef;
Servicio modal para crear un diálogo modal en Angular 2
Nos dirigimos hacia el segundo paso, también llamado paso raíz. El objetivo principal del servicio modal es facilitar la comunicación entre los componentes modales y en la página.
El servicio modal también realiza un seguimiento de qué modales en la página están disponibles y cómo interactuar con ellos.
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é es RxJS?
RxJS (Extensiones reactivas para JavaScript) es un conjunto de módulos que le permiten crear programas asincrónicos y basados en eventos en JavaScript utilizando arreglos y composición visibles.
Componente modal personalizado para crear un cuadro de diálogo modal en Angular 2
La directiva modal personalizada puede agregar modales en una aplicación Angular usando la etiqueta <modal>.
Cuando se carga una instancia modal, se registra con ModalService para que el servicio pueda abrir y cerrar ventanas modales. Se da de baja del ModalService cuando se destruye usando el método 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);
}
}
Finalmente, el código index.html se proporciona a continuación.
<!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>
Entonces, esta es la forma de crear un modal en Angular 2. El código es mantenible, flexible y fácil de usar. Haga clic aquí para ver la demostración en vivo del código.
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