angular 2 - Копировать строку в буфер обмена автоматически при изменении значения

Question

У меня есть угловая служба, которая возвращает строку, и я хочу, чтобы эта строка была в буфере обмена пользователя.

Я установил angular2-clipboard, чтобы отобразить результат на входе и позволить пользователю также нажать кнопку «копировать» в случае автоматического отказа копии. Но я хочу, чтобы при изменении входного значения, связанного с изменением свойства, он автоматически устанавливает содержимое буфера обмена с этим новым значением.

Это в настоящее время работает:

<input readonly type="text" class="form-control" [(ngModel)]="createdCode"> 
<button class="btn btn-default" type="button" ngIIclipboard [cbContent]="createdCode">copy</button> 

Я пытался найти способ с нг-изменения для вызова «# btn.onclick()», чтобы поднять событие щелчка, но не может получить ожидаемое поведение.

Есть ли способ сделать это?

Answer 1

Я выполнил это в приложении, которое я делал, не используя angular2-clipboard.

Я ссылатьс на элемент DOM с помощью ViewChild и ElementRef, и я использовал функцию как это:

@ViewChild('plainVersion') plainVersion: ElementRef; 
 
    plain.value = this.plainVersion.nativeElement.innerText; 
 
    plain.select(); 
 
    try { 
 
     let success = document.execCommand('copy'); 
 
    } catch(err){ 
 
     console.log(err); 
 
    } 
 
    window.getSelection().removeAllRanges();

Убедитесь импортировать ViewChild и ElementRef от @ угловой/ядра.

Я тестировал это только в Chrome, но он может работать в других браузерах.