Angular 2 Modal Dialog
- Was ist modaler Dialog in Angular 2
- Importieren der Bibliotheken zur Erstellung eines modalen Dialogs in Angular 2
- Modaler Dienst zum Erstellen eines modalen Dialogs in Angular 2
- Benutzerdefinierte modale Komponente zum Erstellen eines modalen Dialogs in Angular 2
Angular 2.0 ist die neueste Version des beliebten JavaScript-Frameworks. Es bietet Entwicklern eine neue komponentenbasierte Architektur, unterstützt mobile Geräte und ist in TypeScript geschrieben.
Modale Dialoge sind Fenster, die über dem aktuellen Fenster erscheinen und die Interaktion blockieren, bis sie geschlossen werden. Dieser Artikel erklärt den modalen Dialog von Angular 2.0 im Detail.
Was ist modaler Dialog in Angular 2
Um Entwicklern zu helfen, dynamischere und interaktivere Webanwendungen zu erstellen, hat Angular 2.0 eine neue Komponente namens Modal Dialog eingeführt.
Die Begriffe modaler Dialog und modales Fenster mögen verwirrend erscheinen, sind es aber nicht. Die meisten Leute bezeichnen ein modales Fenster standardmäßig als Popup.
Der modale Dialog ermöglicht es Entwicklern, eine Vielzahl von Dialogen mit reichhaltigen Inhalten und Animationen zu erstellen. Es kann auf unterschiedliche Weise verwendet werden, zum Beispiel:
- Um den Benutzer aufzufordern, indem er um eine Eingabe bittet.
- Um wichtige Nachrichten oder Benachrichtigungen anzuzeigen.
- Zum Anzeigen von Fehlermeldungen oder Bestätigungsmeldungen.
Klicken Sie hier, wenn Sie mehr über Modal Dialog erfahren möchten.
Lassen Sie uns unsere Arbeit der Einfachheit halber wie folgt unterteilen.
- Fügen Sie die Bibliotheken hinzu
- Modale Dienste
- Modale Komponente
Für das Styling haben wir Bootstrap verwendet.
Importieren der Bibliotheken zur Erstellung eines modalen Dialogs in Angular 2
Importieren Sie die folgenden Bibliotheken in die Datei index.html, um die Funktionalität Ihres Codes zu erweitern.
<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>
Danach ist unser Hauptanliegen, den Code zu kompilieren. Mit Angular 2 können Sie Dinge nicht direkt in das DOM kompilieren. Du brauchst einen Platzhalter.
Deshalb haben wir einen modalen Platzhalter erstellt. Denken Sie daran, dass dies der wichtigste Schritt für den Anfang ist.
@Component({
selector: "modal-placeholder",
template: `<div #modalplaceholder></div>`
})
export class ModalPlaceholderComponent implements OnInit {
@ViewChild("modalplaceholder", {read: ViewContainerRef}) viewContainerRef;
Modaler Dienst zum Erstellen eines modalen Dialogs in Angular 2
Wir nähern uns dem zweiten Schritt, auch Wurzelschritt genannt. Der Hauptzweck von modal service besteht darin, die Kommunikation zwischen Onpage- und modalen Komponenten zu erleichtern.
Der modale Dienst verfolgt auch, welche Modale auf der Seite verfügbar sind und wie man mit ihnen interagiert.
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);
};
}
Was ist RxJS?
RxJS(Reactive Extensions for JavaScript) ist eine Suite von Modulen, mit denen Sie asynchrone und ereignisbasierte Programme in JavaScript erstellen können, die sichtbare Arrays und Kompositionen verwenden.
Benutzerdefinierte modale Komponente zum Erstellen eines modalen Dialogs in Angular 2
Die benutzerdefinierte modale Direktive kann Modale in einer Angular-Anwendung mit dem <modal>-Tag hinzufügen.
Wenn eine modale Instanz geladen wird, registriert sie sich beim ModalService, damit der Dienst modale Fenster öffnen und schließen kann. Es wird vom ModalService abgemeldet, wenn es mit der Destroy-Methode zerstört wird.
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);
}
}
Schließlich ist unten der Code index.html angegeben.
<!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>
Auf diese Weise erstellen Sie also ein Modal in Angular 2. Der Code ist wartbar, flexibel und einfach zu verwenden. Klicken Sie hier, um die Live-Demonstration des Codes zu überprüfen.
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