Angular 2 モーダルダイアログ
- Angular 2 のモーダルダイアログとは
- Angular 2 でモーダルダイアログを作成するためのライブラリのインポート
- Angular 2 でモーダルダイアログを作成するモーダルサービス
- Angular 2 でモーダルダイアログを作成するためのカスタムモーダルコンポーネント
Angular 2.0 は、人気のある JavaScript フレームワークの最新バージョンです。開発者に新しいコンポーネントベースのアーキテクチャを提供し、モバイルデバイスをサポートし、TypeScript で記述されています。
モーダルダイアログは、現在のウィンドウの上にポップアップし、閉じるまで操作をブロックするウィンドウです。この記事では、Angular 2.0 モーダルダイアログについて詳しく説明します。
Angular 2 のモーダルダイアログとは
開発者がより動的でインタラクティブな Web アプリケーションを作成できるように、Angular 2.0 はモーダルダイアログと呼ばれる新しいコンポーネントを導入しました。
モーダルダイアログとモーダルウィンドウという用語は紛らわしいように見えるかもしれませんが、そうではありません。ほとんどの人は、デフォルトでモーダルウィンドウをポップアップと呼びます。
モーダルダイアログを使用すると、開発者は豊富なコンテンツとアニメーションを使用してさまざまなダイアログを作成できます。たとえば、次のようにさまざまな方法で使用できます。
- 入力を求めてユーザーにプロンプトを表示します。
- 重要なメッセージまたは通知を表示するため。
- エラーメッセージまたは確認メッセージを表示します。
モーダルダイアログについて詳しく知りたい場合は、ここをクリックしてください。
簡単にするために、作業を次のように分割しましょう。
- ライブラリを追加します
- モーダルサービス
- モーダルコンポーネント
スタイリングの目的で、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 に直接コンパイルすることはできません。プレースホルダーが必要です。
そのため、モーダルプレースホルダーを作成しました。これが開始するための最も重要なステップであることを覚えておいてください。
@Component({
selector: "modal-placeholder",
template: `<div #modalplaceholder></div>`
})
export class ModalPlaceholderComponent implements OnInit {
@ViewChild("modalplaceholder", {read: ViewContainerRef}) viewContainerRef;
Angular 2 でモーダルダイアログを作成するモーダルサービス
ルートステップとも呼ばれる 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（Reactive Extensions for 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