如何解决Angular中this.clipboard.copy在subscribe回调内失效的问题

问题根本原因 #

浏览器出于安全策略限制，剪贴板写入操作必须关联用户主动交互（点击、按键等）的上下文：仅允许在交互触发的同步任务栈，或交互后1秒内的微任务队列中执行写入操作。
你将复制逻辑放到HTTP请求的subscribe回调中时，真实网络请求的响应耗时通常会超过浏览器允许的时间窗口，此时上下文已经脱离用户主动交互的范围，操作会被浏览器默认拦截。你遇到的「点击三次才成功」的现象，是因为第三次请求恰好命中了浏览器/服务端缓存，响应耗时极短，刚好落在允许的时间窗口内。你做的最小复现Demo能正常运行，是因为Demo中用了模拟同步数据流，没有真实网络延迟，subscribe回调属于同步执行，没有脱离交互上下文。

修复方案 #

方案1：预加载复制内容（最稳妥，推荐） #

提前在页面初始化、数据变更时请求需要复制的内容缓存起来，点击按钮时直接同步调用剪贴板接口：

// 提前缓存要复制的内容
cachedCopyText: string = '';

ngOnInit() {
  // 页面初始化时预拉取内容
  this.loadCopyContent();
}

// 数据变更时也可以重新调用拉取最新内容
loadCopyContent() {
  this.service.getText().subscribe(res => {
    this.cachedCopyText = res;
  })
}

copyStuff() {
  // 点击时直接同步复制，不会被拦截
  this.clipboard.copy(this.cachedCopyText);
}

方案2：使用CDK的PendingCopy适配异步场景 #

如果业务要求必须点击按钮时才请求内容，可以使用Angular CDK Clipboard提供的PendingCopy类，在点击的同步上下文先占位，拿到异步返回的内容后再写入：

import { PendingCopy } from '@angular/cdk/clipboard';

copyStuff() {
  // 点击同步上下文先创建PendingCopy实例，占住交互权限
  const pendingCopy = new PendingCopy('');
  this.service.getText().subscribe({
    next: (content) => {
      pendingCopy.copy(content);
      pendingCopy.destroy();
    },
    error: () => {
      pendingCopy.destroy();
    }
  })
}

方案3：使用原生异步剪贴板API #

针对现代浏览器，也可以直接调用标准的异步剪贴板接口，适配异步场景（仅支持HTTPS环境和localhost本地开发环境）：

copyStuff() {
  this.service.getText().subscribe(async (content) => {
    try {
      await navigator.clipboard.writeText(content);
      console.log('复制成功');
    } catch (err) {
      console.error('复制失败，请检查浏览器权限', err);
    }
  })
}

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