typescript - Angular [cdkCopyToClipboard] siendo llamado repetidamente

Estoy usando el ClipboardModule de @angular/cdk/clipboard para copiar datos de mi formulario de Angular, el problema es que acabo de darme cuenta de que mi método CopyDeatils() se está llamando continuamente, pero el valor solo se copia cuando se presiona el botón.

aquí está mi código:

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

y así es como se está llamando:

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

Respuesta #1

Supongo que estás usando la detección de cambios predeterminada. En ese caso, la función se llamará múltiples veces según el ciclo de actualización. En su lugar, podrías vincular el cdkCopyToClipboard a una variable y usar un manejador de eventos mouseup o click para vincular la función. Prueba lo siguiente

controladora

copyToClipboard: string;

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

Plantilla

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

Editar: mover el controlador de eventos (mouseup) antes de la vinculación [cdkCopyToClipboard] según el comentario del OP