背景
刚接触前端不久, 最近在尝试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();
}
}
}
- 效果如下: