Angular中如何使用剪切板Clipboard
项目中要用到剪切板,很容易到方法document.execCommand('copy')
使用过程中发现document.execCommand is deprecated,这个方法已经过时了,虽然还可以用,但我还是希望找到最新的解决办法。
百度了很久都没找到合适的办法,最后使用Bing到英文网站找到以下解决办法。
使用Angular Material项目。
第一步,安装Angular Material
ng add @angular/material
第二步,在app.module.ts添加引用
import { ClipboardModule } from '@angular/cdk/clipboard';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ClipboardModule
],
providers: [],
bootstrap: [AppComponent]
})
第三步,使用this.clipboard.copy()方法
import { Component } from '@angular/core'; import { Clipboard } from '@angular/cdk/clipboard'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { stringToCopy:string = ''; constructor(private clipboard: Clipboard) {} copyTextarea() { this.clipboard.copy(this.stringToCopy); } }
参考链接:https://thecodemon.com/angular-material-clipboard-example-by-tutorial/