您可以围绕以下内容实现 Angular2 指令剪贴板.js https://clipboardjs.com/图书馆。
首先将库配置到 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 https://plnkr.co/edit/elyMcP5PX3UP4RkRQUG8?p=preview.