将AngularJS 1.5.3 Popover迁移至Angular 14.2的实现求助

以下是不依赖第三方Angular组件库（仅使用Bootstrap）的迁移实现，完全贴合原有功能逻辑：

核心思路 #

用Angular组件化能力替代AngularJS的指令式popover，结合Bootstrap样式实现：

• 用*ngTemplateOutlet渲染动态模板
• 通过Renderer2监听外部点击实现关闭逻辑
• 保留原有样式类确保视觉一致性

1. 项目准备 #

确保Angular 14项目已引入Bootstrap CSS：

npm install bootstrap@5

在angular.json的styles数组中添加：

"node_modules/bootstrap/dist/css/bootstrap.min.css"

2. 组件模板代码（component.html） #

替换原AngularJS模板，使用Angular绑定语法：

<!-- 触发链接 -->
<a 
  [id]="mapObj.stId"
  (click)="onStatusClick(mapObj)"
  class="editable editable-click"
  style="color: #808080; cursor: pointer"
  tabindex="0"
>
  <span><b>Accept, Decline, or Reduce total </b></span>
</a>

<!-- 复用的Popover内容模板 -->
<ng-template #statusTemplate let-mapObj="mapObj">
  <div class="editable-container editable-popup popover">
    <div class="popover-header">{{ mapObj.statusTitle }}</div>
    <div class="popover-body">
      <form class="form-inline editableform">
        <div class="control-group form-group">
          <!-- 原有表单内容，替换为Angular表单控件（如ngModel/FormControl） -->
          <!-- 示例：<input type="text" [(ngModel)]="mapObj.someValue" class="form-control"> -->
        </div>
      </form>
    </div>
  </div>
</ng-template>

<!-- 动态渲染的Popover容器 -->
<div 
  *ngIf="!mapObj.isHidePopover"
  [id]="mapObj.stId + '-popover'"
  class="popover-wrapper"
  [style.top]="popoverPosition.top + 'px'"
  [style.left]="popoverPosition.left + 'px'"
>
  <ng-container *ngTemplateOutlet="statusTemplate; context: { mapObj: mapObj }"></ng-container>
</div>

3. 组件逻辑代码（component.ts） #

处理点击触发、位置计算和外部点击关闭：

import { Component, OnInit, ElementRef, Renderer2, ViewChild, TemplateRef, OnDestroy } from '@angular/core';

// 定义MapObj类型，规范数据结构
interface MapObj {
  stId: string;
  isHidePopover: boolean;
  statusTitle: string;
  // 补充原有业务属性
}

@Component({
  selector: 'app-status-popover',
  templateUrl: './status-popover.component.html',
  styleUrls: ['./status-popover.component.css']
})
export class StatusPopoverComponent implements OnInit, OnDestroy {
  mapObj: MapObj = {
    stId: 'demo-id', // 实际从业务数据源获取
    isHidePopover: true,
    statusTitle: ''
  };
  popoverPosition = { top: 0, left: 0 };
  @ViewChild('statusTemplate') statusTemplate!: TemplateRef<any>;
  private clickOutsideListener?: () => void;

  constructor(private elRef: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {}

  onStatusClick(mapObj: MapObj): void {
    if (!mapObj.isHidePopover) {
      mapObj.statusTitle = 'Accept, Decline, or Request Reduction';
    }
    mapObj.isHidePopover = false;
    
    // 计算Popover显示位置（基于触发元素）
    const triggerEl = this.elRef.nativeElement.querySelector(`#${mapObj.stId}`);
    if (triggerEl) {
      const rect = triggerEl.getBoundingClientRect();
      this.popoverPosition = {
        top: rect.bottom + window.scrollY,
        left: rect.left + window.scrollX
      };
    }

    // 绑定外部点击关闭事件
    this.bindClickOutside();
  }

  private bindClickOutside(): void {
    // 先移除旧监听，避免重复绑定
    this.clickOutsideListener?.();
    
    this.clickOutsideListener = this.renderer.listen('document', 'click', (event) => {
      const popoverEl = this.elRef.nativeElement.querySelector(`#${this.mapObj.stId}-popover`);
      const triggerEl = this.elRef.nativeElement.querySelector(`#${this.mapObj.stId}`);
      
      if (popoverEl && !popoverEl.contains(event.target) && !triggerEl.contains(event.target)) {
        this.mapObj.isHidePopover = true;
        this.clickOutsideListener?.();
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时清理监听
    this.clickOutsideListener?.();
  }
}

4. 样式补充（component.css） #

保留原有样式并适配Bootstrap：

.popover-wrapper {
  position: absolute;
  z-index: 1050;
}

.editable-container.editable-popup {
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 覆盖Bootstrap默认样式，匹配原有视觉 */
.popover-header {
  background-color: #f7f7f7;
  border-bottom: 1px solid #ebebeb;
}

替代方案：使用Bootstrap原生Popover #

若想直接复用Bootstrap的JS能力，可按以下方式实现：

1. 引入Bootstrap JS和Popper.js：

npm install bootstrap @popperjs/core

在angular.json的scripts数组中添加：

"node_modules/@popperjs/core/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"

2. 组件代码：

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { Popover } from 'bootstrap';

@Component({
  selector: 'app-status-popover',
  templateUrl: './status-popover-native.component.html'
})
export class StatusPopoverNativeComponent implements AfterViewInit {
  @ViewChild('triggerEl') triggerEl!: ElementRef;
  mapObj = { stId: 'demo-id', statusTitle: '' };
  private popoverInstance?: Popover;

  ngAfterViewInit(): void {
    this.popoverInstance = new Popover(this.triggerEl.nativeElement, {
      title: this.mapObj.statusTitle,
      html: true,
      content: () => {
        const template = document.getElementById(`${this.mapObj.stId}-template`);
        return template?.innerHTML || '';
      },
      trigger: 'click',
      placement: 'bottom'
    });

    // 点击时更新标题
    this.triggerEl.nativeElement.addEventListener('click', () => {
      this.mapObj.statusTitle = 'Accept, Decline, or Request Reduction';
      this.popoverInstance?.setContent({ title: this.mapObj.statusTitle });
    });
  }

  ngOnDestroy(): void {
    this.popoverInstance?.dispose();
  }
}

3. 对应模板：

<a #triggerEl [id]="mapObj.stId" class="editable editable-click" style="color: #808080; cursor: pointer" tabindex="0">
  <span><b>Accept, Decline, or Reduce total </b></span>
</a>

<ng-template #statusTemplate [id]="mapObj.stId + '-template'">
  <form class="form-inline editableform">
    <div class="control-group form-group">
      <!-- 原有表单内容 -->
    </div>
  </form>
</ng-template>

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