Angular [cdkCopyToClipboard] 被重复调用

Question

我正在使用ClipboardModulefrom@angular/cdk/clipboard从我的角度形式复制数据，问题是我刚刚意识到我的CopyDeatils()方法正在被连续调用，但只有在按下按钮时才会复制该值。

这是我的代码：

CopyDetails(): string {       
        return "details ...";       
    }

这就是它的名字：

<button [cdkCopyToClipboard]="CopyDetails()" type="button">Copy</button>

Answer 1

我假设您正在使用默认更改检测。在这种情况下，该函数将根据刷新周期被多次调用。您可以改为将 绑定cdkCopyToClipboard到变量并使用mouseup或click事件处理程序来绑定该函数。尝试以下操作

控制器

copyToClipboard: string;

CopyDetails(): string {
  ...       
  copyToClipboard = "details ...";       
}

模板

<button 
  (mouseup)="CopyDetails()"
  [cdkCopyToClipboard]="copyToClipboard" 
  type="button"
>Copy</button>

编辑：根据OP的评论在绑定(mouseup)之前移动事件处理程序[cdkCopyToClipboard]