Копировать в буфер обмена с помощью Ionic 2

Clipboardjs предоставляет все необходимое для копирования / вырезания из буфера обмена. Было несколько уловок, чтобы разобраться, как использовать его с Angular 2 / Ionic 2, так что вот немного. Сначала установите clipboard.js в командной строке узла, используя:

npm install clipboard --save

В вашем компоненте / странице:

import * as Clipboard from 'clipboard/dist/clipboard.min.js';

Создайте кнопку для копирования:

<button id="cpyBtn" ion-button data-clipboard-target="#copyTarget">
  Copy
</button>

Создайте место, текст которого будет скопирован:

<textarea id="copyTarget" [value]="txtToCopy"></textarea>

В вашем конструкторе:

constructor(
        public toastCtrl: ToastController) {
        this.clipboard = new Clipboard('#cpyBtn');
        this.clipboard.on('success', () => this.showMsg(toastCtrl));
    }

Чтобы предоставить пользователю обратную связь, мы добавили строковый вызов функции showMsg. Примечание. Мы включили наш toastController в качестве параметра. Это необходимо, потому что когда вызывается функция showMsg, она находится в области, отличной от области действия компонента, и вы не можете сделать что-то вроде this.toastCtrl. Вот функция showMsg.

showMsg(toastCtrl: ToastController) {
        let toast = toastCtrl.create({
            message: 'Its copied to clipboard',
            duration: 3000,
            position: 'top'
        });
        toast.present();
    }

Все сделано! Удачной работы с буфером обмена!