angular - Cómo diferenciar entre los atajos nativos Ctrl+C y Ctrl+V y los escuchadores a nivel de documento añadidos usando Javascript
Tengo un servicio de Portapapeles en el que tengo métodos copy() y paste() que se invocan cada vez que hago Ctrl+C y Ctrl+V. Estos son escuchadores de teclado a nivel de documento que se agregan en un componente usando HostListeners. Ahora, cada vez que el usuario copia algún texto y hace Ctrl+V, se activa mi método paste(), lo cual no debería suceder. ¿Cómo puedo evitar que esto ocurra? ¿Alguien podría señalarme en la dirección correcta?
Mi servicio de portapapeles:
export class ClipService {
private srcFolder;
private srcItem;
constructor() {
}
copy(srcFolder, srcItem) {
this.srcFolder = srcFolder;
this.srcItem = srcItem;
}
paste(destFolder) {
}
}
Mi componente:
@Component({
selector: 'new-comp',
templateUrl: 'new-comp.html'
})
export class NewComp {
constructor(private clipboard: ClipService){
}
private keydown(event: KeyboardEvent) {
if (event.defaultPrevented) return;
let folder = this.folder.json;
let item = folder.activeItem;
if (event.ctrlKey && event.keyCode === 67) {
this.clipboard.copy(folder, item);
} else if (event.ctrlKey && event.keyCode === 86) {
this.clipboard.paste(this.finder.activeFolder);
}
}
}
Gracias.
Respuesta #1
En lugar de usar los eventos del teclado para manejar el copiar y pegar, simplemente usa los eventos del portapapeles para manejarlos de la siguiente manera:
@HostListener('document:copy', ['$event'])
copy(evt: ClipboardEvent) {
let folder = this.folder.json;
let item = folder.activeItem;
this.clipboard.copy(folder, item);
}
@HostListener('document:paste', ['$event'])
paste(evt: ClipboardEvent) {
this.clipboard.paste(this.finder.activeFolder);
}
Nota: Los eventos de copia al portapapeles no son compatibles con IE11.
Espero que esto ayude.
Respuesta #2
Disparar evento a nivel de componente en lugar de usar evento a nivel de documento
Activa el método de copiar y pegar cada vez que hagas copiar y pegar en tu componente
Ejemplo
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
host: {
'(click)': 'onClick($event)',
}
})
export class AppComponent {
name = 'Angular';
onClick(e){
console.log(1);
}
}
