将AngularJS可复用确认模态框迁移至Angular 14的实现咨询

在Angular中，组件是实现可复用模态框的最佳选择（指令更适合扩展现有DOM元素的行为，而非独立UI组件）。下面提供两种主流实现方案，分别基于Angular Material和ng-bootstrap，均匹配你原有AngularJS代码的功能逻辑。

方案一：基于Angular Material（官方推荐） #

1. 前置准备（若未安装） #

ng add @angular/material

2. 创建确认模态框组件 #

运行CLI命令生成组件：

ng generate component confirm-modal

组件模板 (confirm-modal.component.html)

<div class="modal-header">
  <h3 class="modal-title" id="modal-title">Warning!</h3>
</div>
<div class="modal-body">{{ data.message }}</div>
<div class="modal-footer">
  <button class="btn btn-primary" (click)="onConfirm()">OK</button>
  <button class="btn btn-warning" (click)="onCancel()">Cancel</button>
</div>

组件逻辑 (confirm-modal.component.ts)

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-modal',
  templateUrl: './confirm-modal.component.html',
  styleUrls: ['./confirm-modal.component.css']
})
export class ConfirmModalComponent {
  constructor(
    public dialogRef: MatDialogRef<ConfirmModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { message: string }
  ) {}

  onConfirm(): void {
    this.dialogRef.close(true);
  }

  onCancel(): void {
    this.dialogRef.close(false);
  }
}

3. 创建全局调用服务 #

运行CLI命令生成服务：

ng generate service confirm-modal

服务逻辑 (confirm-modal.service.ts)

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConfirmModalService {
  constructor(private dialog: MatDialog) {}

  showConfirmModal(message: string): Observable<boolean> {
    const dialogRef = this.dialog.open(ConfirmModalComponent, {
      width: '400px',
      data: { message }
    });

    return dialogRef.afterClosed();
  }
}

4. 在任意组件中调用 #

import { Component } from '@angular/core';
import { ConfirmModalService } from './confirm-modal.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(private confirmModalService: ConfirmModalService) {}

  handleAction(): void {
    this.confirmModalService.showConfirmModal('确定要执行此操作吗？')
      .subscribe(result => {
        if (result) {
          // 用户点击OK，执行原回调逻辑
          console.log('用户确认操作');
        } else {
          // 用户点击取消
          console.log('用户取消操作');
        }
      });
  }
}

5. 模块配置 #

确保在AppModule中导入必要模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from '@angular/material/dialog';

import { AppComponent } from './app.component';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';

@NgModule({
  declarations: [AppComponent, ConfirmModalComponent],
  imports: [BrowserModule, BrowserAnimationsModule, MatDialogModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

方案二：基于ng-bootstrap（适配Bootstrap样式） #

若你原有项目依赖Bootstrap，可选择此方案：

1. 前置准备（若未安装） #

ng add @ng-bootstrap/ng-bootstrap

2. 创建确认模态框组件 #

同样生成组件后，修改如下：

组件模板 (confirm-modal.component.html)

<div class="modal-header">
  <h3 class="modal-title" id="modal-title">Warning!</h3>
</div>
<div class="modal-body">{{ message }}</div>
<div class="modal-footer">
  <button class="btn btn-primary" (click)="onConfirm()">OK</button>
  <button class="btn btn-warning" (click)="onCancel()">Cancel</button>
</div>

组件逻辑 (confirm-modal.component.ts)

import { Component, Input } from '@angular/core';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-confirm-modal',
  templateUrl: './confirm-modal.component.html'
})
export class ConfirmModalComponent {
  @Input() message!: string;

  constructor(public activeModal: NgbActiveModal) {}

  onConfirm(): void {
    this.activeModal.close(true);
  }

  onCancel(): void {
    this.activeModal.close(false);
  }
}

3. 创建全局调用服务 #

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ConfirmModalComponent } from './confirm-modal/confirm-modal.component';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ConfirmModalService {
  constructor(private modalService: NgbModal) {}

  showConfirmModal(message: string): Observable<boolean> {
    const modalRef = this.modalService.open(ConfirmModalComponent);
    modalRef.componentInstance.message = message;

    return modalRef.result;
  }
}

4. 调用方式 #

与方案一完全一致，无需额外修改。

核心设计思路 #

• 组件负责模态框的UI渲染与交互逻辑，符合Angular组件化思想
• 全局服务封装模态框的打开逻辑，实现与原有$rootScope.showConfirmModal一致的全局调用体验
• 使用Observable替代原回调函数，契合Angular的响应式编程风格

内容的提问来源于stack exchange，提问作者moh