我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
我试图实现一个图标,当点击将保存一个变量到用户的剪贴板。我目前已经尝试了几个库,没有一个能够做到这一点。
在Angular 5中,如何正确地将一个变量复制到用户的剪贴板中?
当前回答
你可以使用Angular模块来实现:
navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
其他回答
你可以使用Angular模块来实现:
navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
用纯Angular和ViewChild为自己找到了最简单的解决方案。
import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'cbtest',
template: `
<input type="text" #inp/>
<input type="button" (click)="copy ()" value="copy now"/>`
})
export class CbTestComponent
{
@ViewChild ("inp") inp : any;
copy ()
{
// this.inp.nativeElement.value = "blabla"; // you can set a value manually too
this.inp.nativeElement.select (); // select
document.execCommand ("copy"); // copy
this.inp.nativeElement.blur (); // unselect
}
}
使用angular cdk复制,
Module.ts
import {ClipboardModule} from '@angular/cdk/clipboard';
以编程方式复制一个字符串:
class MyComponent {
constructor(private clipboard: Clipboard) {}
copyHeroName() {
this.clipboard.copy('Alphonso');
}
}
点击一个元素通过HTML复制:
<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>
参考: https://material.angular.io/cdk/clipboard/overview
在Angular中做到这一点并保持代码简单的最好方法就是使用这个项目。
https://www.npmjs.com/package/ngx-clipboard
<fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true"
ngxClipboard [cbContent]="target value here"
(cbOnSuccess)="copied($event)"></fa-icon>
对我来说document.execCommand('copy')给出了弃用警告,我需要复制的数据是在<div>作为textNode,而不是<input>或<textarea>。
这是我在Angular 7中的做法(灵感来自@Anantharaman和@Codemaker的回答):
<div id="myDiv"> <   This is the text to copy.   > </div>
<button (click)="copyToClipboard()" class="copy-btn"></button>
copyToClipboard() {
const content = (document.getElementById('myDiv') as HTMLElement).innerText;
navigator['clipboard'].writeText(content).then().catch(e => console.error(e));
}
}
绝对不是最好的方法,但它达到了目的。