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/