Я пытаюсь реализовать значок, который при нажатии сохранит переменную в буфер обмена пользователя. В настоящее время я пробовал несколько библиотек, и ни одна из них не смогла этого сделать.
Как правильно скопировать переменную в буфер обмена пользователя в Angular 5?
angular
typescript
angular5
анонимный разработчик
источник
источник
Ответы:
Решение 1. Скопируйте любой текст
HTML
.ts файл
Решение 2. Скопируйте из текстового поля
HTML
.ts файл
Демо здесь
Решение 3. Импортируйте стороннюю директиву ngx-clipboard
Решение 4. Специальная директива
Если вы предпочитаете использовать настраиваемую директиву, проверьте ответ Дэна Дохотару, который представляет собой элегантное решение, реализованное с использованием
ClipboardEvent
.источник
Cannot read property 'select' of undefined
angular 6. Совместимо ли это с 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>
Спасибоposition
,left
,top
, иopacity
. и замените его наselBox.style.height = '0';
Я знаю, что это уже было высоко оценено здесь, но я бы предпочел использовать собственный директивный подход и полагаться на ClipboardEvent, как предложил @jockeisorby, а также убедился, что слушатель правильно удален (должна быть предоставлена такая же функция для слушателей событий добавления и удаления)
демонстрация stackblitz
а затем использовать его как таковой
Примечание: обратите внимание, что
window["clipboardData"]
IE необходим, так как он не понимаетe.clipboardData
источник
Я думаю, что это гораздо более чистое решение при копировании текста:
А затем просто вызовите copyToClipboard при событии щелчка в html. (клик) = "copyToClipboard ('texttocopy')"
источник
Что касается Angular Material v9, теперь у него есть CDK с буфером обмена.
Буфер обмена | Угловой материал
Его можно использовать так же просто, как
источник
Измененная версия ответа jockeisorby, которая исправляет некорректное удаление обработчика событий.
источник
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
Вы можете добиться этого с помощью модулей Angular:
источник
Для копирования сообщения можно использовать следующий метод: -
источник
Лучший способ сделать это в Angular и сохранить простой код - это использовать этот проект.
https://www.npmjs.com/package/ngx-clipboard
источник
Скопируйте с помощью angular cdk,
Module.ts
Программно скопируйте строку: MyComponent.ts,
Щелкните элемент, который нужно скопировать через HTML:
Ссылка: https://material.angular.io/cdk/clipboard/overview
источник
Первое предложенное решение работает, нам просто нужно изменить
Чтобы
т.е.
HTML:
.ts файл:
источник