Manejar evento de copia en todo el nivel de la aplicación, angular9 -- javascript campo con angular camp Relacionados El problema

Handle copy event on whole app level, Angular9


0
vote

problema

Español

Estoy trabajando en una aplicación angular9. Hay algunos casos que cuando se usan doble clic en cualquier texto / etiqueta en cualquier parte de la página, y copie eso, Chrome de forma predeterminada agregue algunos caracteres no imprimibles en el texto copiado.

Así que lo estoy pensando, si hay algún servicio de eventos de copia global que puedo inyectar en la aplicación principal. Module y OnCopy, puedo reemplazar el texto no imprimible desde el texto copiado.

Consejos por favor, ¿cómo puedo lograr eso? En JavaScript encontré algo así:

  document.addEventListener('copy', (event) => {     console.log('copy action initiated') });   
Original en ingles

I am working on an Angular9 app. There are some cases that when use double click any text/label on any part of page, and copy that, Chrome by default add some non-printable characters in copied text.

so i thinking that, if there is some global copy event service which i can inject in the main app.module and onCopy, i can replace the non-printable text from the copied text.

Please advice how can i acheive that. In javascript i found somehting like this:

document.addEventListener('copy', (event) => {     console.log('copy action initiated') }); 
     

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

use rxjs.

  const source$ = fromEvent(document, 'copy');   

y ahora solo suscríbete.

  let subscription = source$.subscribe (copy =>  { const selection = document.getSelection(); event.clipboardData.setData('text/plain', selection.toString().toUpperCase()); event.preventDefault();  console.log(copy)  });   

y no olvides cancelar la suscripción en su, es decir, ngondestroy.

 

Use Rxjs.

const source$ = fromEvent(document, 'copy'); 

And now just subscribe.

let subscription = source$.subscribe (copy =>  { const selection = document.getSelection(); event.clipboardData.setData('text/plain', selection.toString().toUpperCase()); event.preventDefault();  console.log(copy)  }); 

And dont forget to cancel the subscription in your, ie, ngOnDestroy.

 
 
     
     

Relacionados problema

0  setdefaultviewcontainerref 'no existe en el tipo mdlsnackbarservice  ( Setdefaultviewcontainerref does not exist on type mdlsnackbarservice ) 
Soy nuevo en angular. Así que quiero usar el SnackBar del diseño de material angular Lite en mi proyecto. He generado el proyecto con CLI angular y agregué md...

-3  Superposición con la imagen superior CSS  ( Overlap with top image css ) 
Necesito crear ion-card como se muestra a continuación. He intentado muchas maneras. Pero no hay suerte todavía. ¿Alguna pista? Note: tiene 2 imágenes. ...

4  IONIC 3: Tipo 'Cualquiera' no es un tipo de función constructor  ( Ionic 3 type any is not a constructor function type ) 
Tuve mi proyecto IONIC 2 en mi misión de Linux cuando me enfrenté y me moví a Mac que tiene IIX 3. Así que creé un nuevo proyecto y reemplazé las páginas, p...

0  Angular 2: Cómo diseñar módulos y componentes  ( Angular 2 how to design modules and components ) 
Tendría la siguiente estructura para la página A en mi solicitud. Directory view --page --page --page --page Directory view --page --page -...

0  ¿Por qué Ngstye siempre selecciona el caso en angular?  ( Why does ngstyle always selectes else case in angular ) 
Tengo un componente que usa NGSTYLE, pero siempre devuelve la condición de la otra, aunque he comprobado, que Fiedland se establece y después del cambio, tamb...

0  Casilla de verificación Angular 2 - ¿Cómo usar [comprobado] con (ngmodelchange)?  ( Angular 2 checkbox how to use checked with ngmodelchange ) 
Estoy teniendo problemas para configurar programáticamente una casilla de verificación en Angular 2. El siguiente código incendia onCheck() Siempre que el u...

0  JQuery Date Pickers en Angular  ( Jquery date pickers in angular ) 
Tengo un selector de fecha JQueryui utilizado en una aplicación angular. El selector de fecha tiene un evento de cambio de NG asignado a él. Esto se dispara b...

-1  Pantalla HTML recursiva angular piramidal  ( Pyramid angular recursive html display ) 
Estoy tratando de mostrar un diagrama de árbol de aspecto de pirámide recursivo, pero estoy luchando con la implementación básica de CSS HTML Mi implementac...

0  Angular 5 Obtener solicitud no respondida  ( Angular 5 get request nonresponsive ) 
He visto muchos problemas similares con respecto a este problema en este sitio, pero tienden a ser demasiado específicos (con Django, Python, Spring, etc.) o ...

0  Enrutamiento angular2 anidado  ( Angular2 nested routing ) 
Tengo un tablero de instrumentos que tiene un enlace a la página de perfil. Cuando un usuario va a la página de perfil, muestra su perfil, que tiene varias se...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos