Angular2组件库 - Modal组件实现详解（一）

       这篇文章其实写的有点晚了。去年6月份，Angular2的版本刚升级到rc-4，一切都还处于蛮荒时期（虽然现在依然不是太稳定...）。当时为我们的组件库开发Modal组件，因为严格遵守ant design的规范来开发，所以Modal包含了Directive和Service两种模式

       Directive模式非常符合Angular2的设计思想，所以开发过程也是顺风顺水。使用的方法也非常的常规。

import { Component } from '@angular/core';


@Component({
  selector: 'nz-demo-modal-basic',
  template: `
    <button nz-button [nzType]="'primary'" (click)="showModal()">
      <span>显示对话框</span>
    </button>
    <nz-modal [nzVisible]="isVisible" [nzTitle]="'第一个 Modal'" [nzContent]="modalContent" (nzOnCancel)="handleCancel($event)" (nzOnOk)="handleOk($event)">
      <template #modalContent>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
      </template>
    </nz-modal>
  `,
  styles:[]
})
export class nzDemoModalBasic {
  private isVisible: boolean = false;

  private showModal = () => {
    this.isVisible = true;
  }

  private handleOk = (e) => {
    console.log('点击了确定');
    this.isVisible = false;
  }

  private handleCancel = (e) => {
    console.log(e);
    this.isVisible = false;
  }

  constructor() {}
}

       但实际上这中Directive的方法局限性很大，需要预设好Modal的内容，使用的时候需要对Modal进行显示和隐藏。这样做的弊端非常明显，需要Modal内部的内容相对固定，如果一个页面有很多使用Modal的地方，需要再template里加入很多的