Próbuję zaimplementować ikonę, która po kliknięciu zapisze zmienną w schowku użytkownika. Obecnie wypróbowałem kilka bibliotek i żadna z nich nie była w stanie tego zrobić.
Jak poprawnie skopiować zmienną do schowka użytkownika w Angular 5?
angular
typescript
angular5
anonymous-dev
źródło
źródło
Odpowiedzi:
Rozwiązanie 1: Skopiuj dowolny tekst
HTML
plik .ts
Rozwiązanie 2: Skopiuj z TextBox
HTML
plik .ts
Demo tutaj
Rozwiązanie 3: Zaimportuj dyrektywę ngx-clipboard innej firmy
Rozwiązanie 4: Dyrektywa niestandardowa
Jeśli wolisz, stosując dyrektywę niestandardową, Sprawdź Dan Dohotaru za odpowiedź , która jest eleganckie rozwiązanie zaimplementowane przy użyciu
ClipboardEvent
.źródło
Cannot read property 'select' of undefined
angular 6. Czy to jest zgodne z angular6?<input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button>
Dziękiposition
,left
,top
, iopacity
. i zamień naselBox.style.height = '0';
Wiem, że zostało to już tutaj wysoko ocenione, ale wolałbym wybrać podejście z niestandardową dyrektywą i polegać na zdarzeniu ClipboardEvent, jak sugerował @jockeisorby, jednocześnie upewniając się, że odbiornik jest poprawnie usunięty (ta sama funkcja musi być zapewniona zarówno dla detektorów dodawania, jak i usuwania zdarzeń)
demo stackblitz
a następnie użyj go jako takiego
Uwaga: zwróć uwagę, że
window["clipboardData"]
IE jest potrzebne, ponieważ nie rozumiee.clipboardData
źródło
Myślę, że jest to znacznie czystsze rozwiązanie podczas kopiowania tekstu:
A następnie po prostu wywołaj zdarzenie copyToClipboard po kliknięciu w html. (click) = "copyToClipboard ('texttocopy')"
źródło
Od wersji Angular Material v9 ma teraz CDK ze schowkiem
Schowek | Materiał kątowy
Może być używany tak prosto, jak
źródło
Zmodyfikowana wersja odpowiedzi jockeisorby, która naprawia procedurę obsługi zdarzeń, która nie została poprawnie usunięta.
źródło
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
Możesz to osiągnąć za pomocą modułów Angular:
źródło
Do skopiowania wiadomości można użyć poniższej metody: -
źródło
Najlepszym sposobem na zrobienie tego w Angular i zachowanie prostoty kodu jest użycie tego projektu.
https://www.npmjs.com/package/ngx-clipboard
źródło
Skopiuj za pomocą kątowego cdk,
Module.ts
Programowo skopiuj ciąg: MyComponent.ts,
Kliknij element do skopiowania za pomocą HTML:
Źródła: https://material.angular.io/cdk/clipboard/overview
źródło
Pierwsze sugerowane rozwiązanie działa, musimy tylko zmienić
Do
to znaczy,
HTML:
plik .ts:
źródło