Angular 模态框（Modal）的实现

在 Web 界面开发过程中，模态框是经常使用的一种组件。它可以用于弹出对话框、提示框、表单填写等多种场景。Angular 提供了一些内置的指令和服务，使得我们可以很方便地实现模态框。

创建模态框组件

我们首先需要创建一个组件来实现模态框的显示与隐藏。使用 Angular CLI 可以很方便地创建：

ng generate component modal

这会生成一个 modal 组件，并在 app.module.ts 中自动导入。

接下来，我们要在 modal.component.html 文件中编写模态框的 HTML 代码。下面是一个简单的例子：

<div class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{ title }}</h4>
        <button type="button" class="close" (click)="onCloseClick()">×</button>
      </div>
      <div class="modal-body">
        <ng-content></ng-content>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onCloseClick()">关闭</button>
        <button type="button" class="btn btn-primary" (click)="onConfirmClick()">保存</button>
      </div>
    </div>
  </div>
</div>

这个 HTML 代码与普通的 Bootstrap 模态框非常相似。它包括一个 modal 对话框，并在其中定义了 header、body 和 footer 部分，其中 body 部分使用了 ng-content 指令来插入传递进来的内容。

接下来我们需要在 modal.component.ts 中定义该组件的属性和方法，以便于其它组件可以控制模态框的显示与隐藏：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.css']
})
export class ModalComponent {
  @Input() title: string;
  @Output() confirm = new EventEmitter();
  @Output() cancel = new EventEmitter();

  onCloseClick() {
    this.cancel.emit();
  }

  onConfirmClick() {
    this.confirm.emit();
  }
}

这里使用了 @Input 和 @Output 装饰器，使得其它组件可以通过绑定这些属性来控制模态框的显示与隐藏。同时也定义了 cancel 和 confirm 事件，当点击取消或确认按钮时会触发这些事件。

显示模态框

现在我们已经有了一个 modal 组件，如何在其它组件中使用它呢？我们可以使用 Angular 提供的服务将 modal 组件添加到当前页面上。

在 app.module.ts 中导入以下两个模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal/modal.component';

NgbModule 是一个由 Bootstrap 样式库实现的 Angular 版本，其中定义了一些常用的 UI 组件和指令。我们在这里使用它来实现模态框。

接下来在 app.component.html 中引入 modal 组件：

<app-modal #modal [title]="title" (confirm)="onConfirm()" (cancel)="onCancel()">
  <!-- 这里是填充到 body 部分的内容 -->
</app-modal>

这里使用了 #modal 来引用模态框组件，并通过 title 属性传递了标题文字，同时将 confirm 和 cancel 事件绑定到了两个回调函数中。

最后，在 app.component.ts 中编写以下代码来显示模态框：

import { Component, ViewChild } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ModalComponent } from './modal/modal.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Modal Demo';
  @ViewChild('modal', {static: false}) modal: ModalComponent;

  constructor(private modalService: NgbModal) {}

  openModal() {
    this.modalService.open(this.modal);
  }

  onConfirm() {
    console.log('Confirmed');
    this.modalService.dismissAll();
  }

  onCancel() {
    console.log('Canceled');
    this.modalService.dismissAll();
  }
}

这里使用了 ViewChild 装饰器来获取模态框组件的实例，并将其传递给 modalService 的 open 方法。当用户点击确认或取消按钮时，会触发相应的事件处理函数并关闭模态框。

总结

在本篇博客中，我们学习了如何在 Angular 中实现模态框的显示与隐藏，包括创建模态框组件、定义属性和方法、以及使用 NgbModule 和 NgbModal 服务来实现模态框的显示。