Angular使用ngx-clipboard复制到剪贴板

最近有个需求需要用到复制到剪贴板这个功能,记录下.

https://www.npmjs.com/package/ngx-clipboard

首先先下载依赖

npm i ngx-clipboard

再在module中引用

import { ClipboardModule } from 'ngx-clipboard';
@NgModule({
  imports: [ ClipboardModule],
  .....
})

在ts中使用

import { ClipboardService } from 'ngx-clipboard'

constructor(private clipboardService: ClipboardService){}

....
this.clipboardService.copy($src);

在html中使用

<button ngxClipboard [cbContent]="'target string'">Copy</button>

<input type="text" #inputTarget />
 
<button [ngxClipboard]="inputTarget">Copy</button>

<div #container>
    <button ngxClipboard [cbContent]="'target string'" [container]="container">Copy</button>
</div>