Angular学习笔记86：做一个简单的复制内容到剪切板的组件

复制内容到剪切板是一个很常见的操作

生成一个组件 copyClipboard

执行命令

ng generate component copyClipboard
CREATE src/app/component/copy-clipboard/copy-clipboard.component.less (0 bytes)
CREATE src/app/component/copy-clipboard/copy-clipboard.component.html (33 bytes)
CREATE src/app/component/copy-clipboard/copy-clipboard.component.spec.ts (678 bytes)
CREATE src/app/component/copy-clipboard/copy-clipboard.component.ts (301 bytes)
UPDATE src/app/app.module.ts (2002 bytes)

修改 copyClipboard 组件的模版文件

<ng-container>
  <ng-template #contentTemplate let-content="copyContent">
    {{ copyContent }}
  </ng-template>
  <ng-template [ngTemplateOutlet]="contentTemplate"></ng-template>
  <i nz-icon type="copy" theme="outline" (click)="handleCopyContent()"></i>
</ng-container>

修改 copyClipboard 组件的类文件

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

@Component({
  selector: 'p[appCopyable],label[appCopyable],span[appCopyable]，[appCopyable]',
  exportAs: 'appCopyable',
  templateUrl: './copy-clipboard.component.html',
  styleUrls: ['./copy-clipboard.component.less']
})
export class CopyClipboardComponent implements OnInit {
  @Input('copyContent') copyContent: string;

  constructor(private notification: NzNotificationService,
              private render2: Renderer2) {
  }

  ngOnInit() {
  }

  public handleCopyContent() {
    const copyText = this.render2.createText(this.copyContent);
    const copyElement = this.render2.createElement('label');
    this.render2.appendChild(copyElement, copyText)
    this.render2.appendChild(document.body, copyElement)
    this.render2.setStyle(copyElement, 'opacity', '0');
    const range = document.createRange();
    range.selectNode(copyElement);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    this.notification.success('复制成功～', '');
    window.getSelection().removeAllRanges();
    this.render2.removeChild(document.body, copyElement);
  }

}

这里使用 Renderer2 将复制的数据手动添加到 document.body中，复制到剪切板以后，在将添加的元素移除。

修改 copyClipboard 组件的样式文件

i {
  color: #ccc;
  margin-left: 8px;
  cursor: pointer;

  &:hover {
    color: #1890ff;
  }
}

将这个组件引入到当前项目的共享模块中

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecondaryTitleComponent } from '../secondary-title/secondary-title.component';
import { NzNotificationModule } from 'ng-zorro-antd';
import { CopyClipboardComponent } from '../copy-clipboard/copy-clipboard.component';

@NgModule({
  declarations: [
    SecondaryTitleComponent,
    CopyClipboardComponent
  ],
  imports: [
    CommonModule,
    NzNotificationModule,
  ],
  exports: [
    CopyClipboardComponent,
    SecondaryTitleComponent
  ]
})
export class ComponentsModule {
}

使用此组件

<nz-content>
  <h3>单独使用</h3>
  <label #copyWord>这事要复制到剪切板的内容</label>
  <button nz-button (click)="handleCopyToClipboard(copyWord)">复制</button>
  <h3>封装到组件中使用</h3>
  <label appCopyable [copyContent]="'封装的组件到剪切板'"></label>
</nz-content>

效果

详细代码已经上传到GitHub