Ich versuche, ein Symbol zu implementieren, das beim Klicken eine Variable in der Zwischenablage des Benutzers speichert. Ich habe derzeit mehrere Bibliotheken ausprobiert und keine von ihnen war dazu in der Lage.
Wie kopiere ich eine Variable in Angular 5 ordnungsgemäß in die Zwischenablage des Benutzers?
angular
typescript
angular5
anonym-dev
quelle
quelle
Antworten:
Lösung 1: Kopieren Sie einen beliebigen Text
HTML
.ts Datei
Lösung 2: Kopieren aus einer TextBox
HTML
.ts Datei
Demo hier
Lösung 3: Importieren Sie eine Direktive ngx-clipboard eines Drittanbieters
Lösung 4: Benutzerdefinierte Richtlinie
Wenn Sie eine benutzerdefinierte Direktive bevorzugen, überprüfen Sie die Antwort von Dan Dohotaru, bei der es sich um eine elegante Lösung handelt, die mit implementiert wird
ClipboardEvent
.quelle
Cannot read property 'select' of undefined
in Winkel 6. Ist das eckig6-kompatibel?<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>
Dankeposition
,left
,top
, undopacity
. und ersetzen Sie es durch einselBox.style.height = '0';
Ich weiß, dass dies hier bereits hoch bewertet wurde, aber ich würde mich lieber für einen benutzerdefinierten Direktivenansatz entscheiden und mich auf das ClipboardEvent verlassen, wie von @jockeisorby vorgeschlagen, und gleichzeitig sicherstellen, dass der Listener korrekt entfernt wird (dieselbe Funktion muss bereitgestellt werden) für die Listener zum Hinzufügen und Entfernen von Ereignissen)
Stackblitz- Demo
und dann als solches verwenden
Hinweis: Beachten Sie, dass das
window["clipboardData"]
für IE benötigt wird, da es nicht verstehte.clipboardData
quelle
Ich denke, dies ist eine viel sauberere Lösung beim Kopieren von Text:
Und dann rufen Sie einfach copyToClipboard beim Klickereignis in HTML auf. (click) = "copyToClipboard ('texttocopy')"
quelle
Ab Angular Material v9 verfügt es jetzt über ein CDK für die Zwischenablage
Zwischenablage | Winkelmaterial
Es kann so einfach wie verwendet werden
quelle
Geänderte Version von Jockeisorbys Antwort, die behebt, dass der Ereignishandler nicht ordnungsgemäß entfernt wird.
quelle
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
Sie können dies mit Angular-Modulen erreichen:
quelle
Die folgende Methode kann zum Kopieren der Nachricht verwendet werden: -
quelle
Der beste Weg, dies in Angular zu tun und den Code einfach zu halten, ist die Verwendung dieses Projekts.
https://www.npmjs.com/package/ngx-clipboard
quelle
Kopieren mit eckigen cdk,
Module.ts
Kopieren Sie programmgesteuert eine Zeichenfolge: MyComponent.ts,
Klicken Sie auf ein Element, um es über HTML zu kopieren:
Referenz: https://material.angular.io/cdk/clipboard/overview
quelle
Der erste Lösungsvorschlag funktioniert, wir müssen ihn nur ändern
Zu
dh
HTML:
.ts Datei:
quelle