Angular学习笔记84：将复制页面的上文字到剪切板

在项目中，偶尔会遇到将页面的文字复制到用户的剪切板中，方便用户操作，但是由于这种操作比较少，可能整个应用就一个地方或者两个地方，引入一个插件可能代价有点大。

创建一个组件

ng generate component copyToClipboard
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.less (0 bytes)
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.html (36 bytes)
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.spec.ts (693 bytes)
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.ts (312 bytes)
UPDATE src/app/pages/pages.module.ts (2939 bytes)

修改组件的模版文件

<nz-content>
  <label>这事要复制到剪切板的内容</label>
  <button nz-button>复制</button>
</nz-content>

在组件的泪文件中添加复制的方法

import { Component, OnInit, Renderer2 } from '@angular/core';
import { NzNotificationService } from 'ng-zorro-antd';

@Component({
  selector: 'app-copy-to-clipboard',
  templateUrl: './copy-to-clipboard.component.html',
  styleUrls: ['./copy-to-clipboard.component.less']
})
export class CopyToClipboardComponent implements OnInit {

  constructor(private notification: NzNotificationService) {
  }

  ngOnInit() {
  }

  public handleCopyToClipboard(copyWord: HTMLElement) {
    const range = document.createRange();
    range.selectNode(copyWord);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    this.notification.success('复制成功～', '');
    window.getSelection().removeAllRanges();
  }
}

这里notification是使用在复制成功以后给用户一个提示

将类文件中复制的函数与按钮点击事件绑定

<nz-content>
  <label #copyWord>这事要复制到剪切板的内容</label>
  <button nz-button (click)="handleCopyToClipboard(copyWord)">复制</button>
</nz-content>

效果如下

在GitHub中查看