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/

posted @ 2022-01-04 11:37  辉耀Excel网络函数库  阅读(384)  评论(0编辑  收藏  举报