Búsqueda de sitios web

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);
  }
}

Artículos relacionados