点击按钮无法修改ngx-bootstrap Popover文本？求有效解决方案

需求 #

• 按钮hover时popover默认显示“Copy”
• 点击按钮后popover文本切换为“Copied!”
• 再次hover按钮时，popover恢复显示“Copy”

当前实现中popover文本始终显示“Copy”，无法实现上述切换效果。

现有代码 #

HTML #

<button type="button" class="btn btn-secondary small" data-testid="copy-button"
        [popover]="copyText" triggers="mouseenter:mouseleave"
        (click)="copyToClipboard()"
      >
</button>

Component.ts（初始版本） #

public copyText = 'Copy';

constructor() {}

public copyToClipboard() {
    if(this.summary?.summary === undefined) {
      return;
    }

    this.copyText = 'Copied!';
    navigator.clipboard.writeText(this.summary.summary);

    setTimeout(() => {
      this.copyText = 'Copy';
    }, 1000);
}

尝试过的无效方法 #

1. 使用ChangeDetectorRef强制变更检测：

constructor(
    private changeDetector: ChangeDetectorRef
) { }

public copyToClipboard() {
    if(this.summary?.summary === undefined) {
      return;
    }

    this.copyText = 'Copied!';
    this.changeDetector.detectChanges();
    navigator.clipboard.writeText(this.summary.summary);

    setTimeout(() => {
      this.copyText = 'Copy';
    }, 1000);
}

2. 使用setTimeout延迟更新变量：

public copyToClipboard() {
    if(this.summary?.summary === undefined) {
      return;
    }

    setTimeout(() => {
      this.copyText = 'Copied!';
    }, 0);

    navigator.clipboard.writeText(this.summary.summary);

    setTimeout(() => {
      this.copyText = 'Copy';
    }, 1000);
}

问题原因 #

ngx-bootstrap的[popover]直接绑定字符串时，组件会在初始化阶段缓存内容，后续变量变更无法触发popover内容的重新渲染。同时，点击按钮时popover处于隐藏状态（触发条件为mouseenter:mouseleave），即使变量更新用户也无法看到变化，1秒后变量恢复为“Copy”，导致下次hover仍显示初始文本。

解决方案 #

改用模板式popover定义内容，确保Angular变更检测能监听变量变化；同时在点击时手动控制popover显示，让用户能看到“Copied!”提示。

修改后的代码 #

HTML

<button #copyBtn type="button" class="btn btn-secondary small" data-testid="copy-button"
        [popover]="popoverContent" triggers="mouseenter:mouseleave"
        (click)="copyToClipboard(copyBtn)"
      >
</button>

<ng-template #popoverContent>{{ copyText }}</ng-template>

Component.ts

import { ViewChild } from '@angular/core';
import { PopoverDirective } from 'ngx-bootstrap/popover';

public copyText = 'Copy';
@ViewChild(PopoverDirective) popover?: PopoverDirective;

constructor() {}

public copyToClipboard(btnElement: HTMLElement) {
    if(this.summary?.summary === undefined) {
      return;
    }

    // 更新文本并手动显示popover
    this.copyText = 'Copied!';
    this.popover?.show(btnElement);

    navigator.clipboard.writeText(this.summary.summary);

    setTimeout(() => {
      // 隐藏popover并恢复文本
      this.popover?.hide();
      this.copyText = 'Copy';
    }, 1000);
}

说明 #

1. 通过ng-template定义popover内容，copyText的变更会被Angular变更检测捕获，自动更新popover内容。
2. 用@ViewChild获取PopoverDirective实例，点击按钮时手动调用show()显示popover，确保用户能看到“Copied!”提示。
3. 1秒后隐藏popover并恢复文本，下次hover时popover会显示更新后的“Copy”文本。

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