有没有办法在 Angular 2 Typescript 框架中复制剪贴板(多浏览器)中的文本?
我只找到使用 Javascript 的来源,egp>
document.execCommand('copy')
最佳答案
您可以围绕 clipboard.js 实现 Angular2 指令图书馆。
首先将库配置到 SystemJS 中:
<script>
System.config({
map: {
clipboard: 'https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.js'
},
packages: {
'app': {
defaultExtension: 'js'
}
}
});
(...)
</script>
我们希望能够通过指令将剪贴板附加到元素上,并提供我们要链接的 DOM 元素作为参数。指定到指定目标元素中的值将用于复制其文本。这是一个使用示例:
<div>
<input #foo/>
<button [clipboard]="foo">Copy</button>
</div>
指令的实现如下:
import {Directive,ElementRef,Input,Output,EventEmitter} from 'angular2/core';
import Clipboard from 'clipboard';
@Directive({
selector: '[clipboard]'
})
export class ClipboardDirective {
clipboard: Clipboard;
@Input('clipboard')
elt:ElementRef;
@Output()
clipboardSuccess:EventEmitter<any> = new EventEmitter();
@Output()
clipboardError:EventEmitter<any> = new EventEmitter();
constructor(private eltRef:ElementRef) {
}
ngOnInit() {
this.clipboard = new Clipboard(this.eltRef.nativeElement, {
target: () => {
return this.elt;
}
});
this.clipboard.on('success', (e) => {
this.clipboardSuccess.emit();
});
this.clipboard.on('error', (e) => {
this.clipboardError.emit();
});
}
ngOnDestroy() {
if (this.clipboard) {
this.clipboard.destroy();
}
}
}
请参阅此 plunkr 以获取示例:https://plnkr.co/edit/elyMcP5PX3UP4RkRQUG8?p=preview .
关于angular - 如何在 Angular 2 Typescript 中复制到剪贴板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36328159/