迹忆客 专注技术分享

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 中创建模态的方式。代码可维护、灵活且易于使用。