Angular 2 模態對話方塊
- 什麼是 Angular 2 中的模態對話方塊
- 匯入庫以在 Angular 2 中建立模態對話方塊
- 在 Angular 2 中建立模態對話方塊的模態服務
- 自定義模態元件以在 Angular 2 中建立模態對話方塊
Angular 2.0 是流行的 JavaScript 框架的最新版本。它為開發人員提供了一種新的基於元件的架構，支援移動裝置，並且是用 TypeScript 編寫的。
模態對話方塊是在當前視窗頂部彈出並阻止互動直到關閉的視窗。本文將詳細解釋 Angular 2.0 模態對話方塊。
什麼是 Angular 2 中的模態對話方塊
為了幫助開發人員建立更具動態性和互動性的 Web 應用程式，Angular 2.0 引入了一個名為 Modal Dialog 的新元件。
術語 modal dialog 和 modal window 可能看起來令人困惑，但事實並非如此。大多數人預設將模態視窗稱為彈出視窗。
模態對話方塊使開發人員能夠建立具有豐富內容和動畫的各種對話方塊。它可以以不同的方式使用，例如：
- 通過要求輸入來提示使用者。
- 顯示重要訊息或通知。
- 顯示錯誤資訊或確認資訊。
點選這裡如果你想了解更多關於模態對話方塊的資訊。
為簡單起見，讓我們將工作分為以下幾部分。
- 新增庫
- 模態服務
- 模態元件
出於造型目的，我們使用了 Bootstrap。
匯入庫以在 Angular 2 中建立模態對話方塊
在 index.html 檔案中匯入以下庫以增強程式碼的功能。
<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>
在此之後，我們主要關心的是編譯程式碼。你不能用 Angular 2 直接將東西編譯到 DOM；你需要一個佔位符。
這就是我們製作 modal placeholder 的原因。請記住，這是開始的最重要步驟。
@Component({
selector: "modal-placeholder",
template: `<div #modalplaceholder></div>`
})
export class ModalPlaceholderComponent implements OnInit {
@ViewChild("modalplaceholder", {read: ViewContainerRef}) viewContainerRef;
在 Angular 2 中建立模態對話方塊的模態服務
我們正在邁向第二步，也稱為根步。模態服務的主要目的是使頁面和模態元件更容易通訊。
模態服務還跟蹤哪些頁面模態可用以及如何與它們互動。
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);
};
}
什麼是 RxJS
RxJS（JavaScript 的響應式擴充套件）是一套模組，允許你使用可見陣列和組合在 JavaScript 中建立非同步和基於事件的程式。
自定義模態元件以在 Angular 2 中建立模態對話方塊
自定義模態指令可以使用 <modal> 標籤在 Angular 應用程式中新增模態。
當一個模態例項載入時，它會向 ModalService 註冊，以便該服務可以開啟和關閉模態視窗。當使用 Destroy 方法銷燬時，它會從 ModalService 登出。
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);
}
}
最後，index.html 程式碼如下。
<!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>
因此，這就是在 Angular 2 中建立模態的方式。程式碼可維護、靈活且易於使用。點選這裡檢視程式碼的演示。
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