Angular中如何通过cdkCopyToClipboard点击事件实现条件渲染文本

你可以通过cdkCopyToClipboard内置的(cdkCopyToClipboardCopied)输出事件监听复制成功动作，结合组件里的copied变量实现文本切换，具体实现如下：

组件类代码 #

export class ThankyouComponent {
  copied = false;
  value = 'https://url.com';

  // 可选：添加自动重置状态的方法，提升交互体验
  resetCopyStatus() {
    setTimeout(() => {
      this.copied = false;
    }, 2000);
  }
}

模板代码 #

<button 
  [cdkCopyToClipboard]="value"
  (cdkCopyToClipboardCopied)="copied = true; resetCopyStatus()"
>
  {{ copied ? "url copied" : "copy url" }}
</button>

说明：

• (cdkCopyToClipboardCopied)是Angular CDK剪贴板组件提供的输出事件，会在复制操作成功完成时触发
• 触发事件时直接将copied设为true，同时调用resetCopyStatus（可选）实现几秒后自动恢复原按钮文本
• 模板中的{{ copied ? "url copied" : "copy url" }}是Angular的条件插值语法，逻辑和React的三元表达式完全对应

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