Angular使用CDK Clipboard报错copy方法不存在于Clipboard类型如何解决

• 1. Clipboard服务导入错误：你当前组件的ts文件中没有显式从@angular/cdk/clipboard导入Angular CDK提供的Clipboard服务，TS默认识别到的是浏览器原生的Clipboard接口，该原生接口不存在copy实例方法，因此触发类型报错。
• 2. 模板指令使用错误：cdkCopyToClipboard输入属性需要接收要复制的字符串内容，而非点击回调方法，你当前的绑定写法不仅不符合指令要求，还会导致copyTest方法被频繁触发。

你的app.module.ts中ClipboardModule的导入逻辑没有问题，只需要修改组件侧的代码即可：

1. 修正组件ts文件的导入逻辑

// 在组件ts文件顶部添加这行导入，指定使用CDK提供的Clipboard服务
import { Clipboard } from '@angular/cdk/clipboard';

export class myComponent implements OnInit {
  constructor(private clipboard: Clipboard) {}
  ngOnInit(): void {}

  copyTest() {
    this.clipboard.copy("test");
  }
}

2. 修正模板绑定逻辑，两种方案二选一即可：

• 方案A：直接用cdkCopyToClipboard指令绑定要复制的内容，不需要额外写TS方法

<button [cdkCopyToClipboard]="'test'">Click to copy</button>

• 方案B：如果需要自定义复制逻辑，就用click事件绑定你写的copyTest方法

<button (click)="copyTest()">Click to copy</button>

内容的提问来源于stack exchange，提问作者Théophile Wallez