原生 Angular 2.x 构建模态框(modal)

背景

刚接触前端不久, 最近在尝试Angular 2.x, 涉及到模态框(Modal)的使用;

原先AngularJS下生成Modal框注入ui.bootstrap外部依赖即可. 而Angular 2.x下关于模态框的外部依赖大多提及到 ngx-bootstrap, 本人实践过程中在安装此依赖时告警如下:

> npm install ngx-bootstrap-modal --save
......
npm WARN @angular/http@5.2.11 requires a peer of rxjs@^5.5.0 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@5.2.11 requires a peer of @angular/core@5.2.11 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/http@5.2.11 requires a peer of @angular/platform-browser@5.2.11 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

在app.module.ts中引入后编译时报错:

// app.module.ts
import { BootstrapModalModule } from 'ngx-bootstrap-modal';
import { ModalModule } from 'ngx-bootstrap/modal';

---error---
ERROR in ./node_modules/ngx-bootstrap-modal/bundles/ngx-bootstrap-modal.umd.js
Module not found: Error: Can't resolve 'rxjs/Observable' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\bundles'
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/core/esm2015/core.js
Module not found: Error: Can't resolve 'rxjs/Observable' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\core\esm2015'
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/core/esm2015/core.js
Module not found: Error: Can't resolve 'rxjs/Subject' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\core\esm2015'
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/core/esm2015/core.js
Module not found: Error: Can't resolve 'rxjs/Subscription' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\core\esm2015'
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/forms/esm2015/forms.js
Module not found: Error: Can't resolve 'rxjs/observable/forkJoin' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\forms\esm2015'    
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/forms/esm2015/forms.js
Module not found: Error: Can't resolve 'rxjs/observable/fromPromise' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\forms\esm2015' 
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/core/esm2015/core.js
Module not found: Error: Can't resolve 'rxjs/observable/merge' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\core\esm2015'        
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/forms/esm2015/forms.js
Module not found: Error: Can't resolve 'rxjs/operator/map' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\forms\esm2015'
ERROR in ./node_modules/ngx-bootstrap-modal/node_modules/@angular/core/esm2015/core.js
Module not found: Error: Can't resolve 'rxjs/operator/share' in 'D:\angular_work\modalDemo\node_modules\ngx-bootstrap-modal\node_modules\@angular\core\esm2015'
i ｢wdm｣: Failed to compile.

查询许久无果, 无意间发现了使用原生Angular构建模态框的方法, 做此记录.

---

正文

源自 Stephen Paul 在stackoverflow上的"Angular 2.0 and Modal Dialog"问题下的回答, 原文见:

https://stackoverflow.com/questions/34513558/angular-2-0-and-modal-dialog?r=SearchResults

• 使用angular/cli自动构建生成, 并构建自定义组件modal

ng new modalTest
ng generate component modal

• 模态框的样式使用Bootstrap, 因此在index.html中添加外部引用:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

• app.component.ts:

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

@Component({
  selector: 'app-root',
  // templateUrl: './app.component.html',
  template: `
  <button type="button" (click)="modal.show()" class="btn btn-primary">test</button>
  <app-modal #modal>
    <div class="app-modal-header">
      Header
    </div>
    <div class="app-modal-body">
      content area
    </div>
    <div class="app-modal-footer">
      <button type="button" class="btn btn-default" (click)="modal.hide()">Close</button>
      <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </app-modal>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'modalTest';
}

• modal.component.ts:

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

@Component({
  selector: 'app-modal',
  // templateUrl: './modal.component.html',
  template: `
  <div (click)="onContainerClicked($event)" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
       [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <ng-content select=".app-modal-header"></ng-content>
        </div>
        <div class="modal-body">
          <ng-content select=".app-modal-body"></ng-content>
        </div>
        <div class="modal-footer">
          <ng-content select=".app-modal-footer"></ng-content>
        </div>
      </div>
    </div>
  </div>
  `,
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {

  public visible = false;
  public visibleAnimate = false;

  public show(): void {
    this.visible = true;
    setTimeout(() => this.visibleAnimate = true, 100);
  }

  public hide(): void {
    this.visibleAnimate = false;
    setTimeout(() => this.visible = false, 300);
  }

  public onContainerClicked(event: MouseEvent): void {
    if ((<HTMLElement>event.target).classList.contains('modal')) {
      this.hide();
    }
  }
}

• 效果如下: