ionic3 实现长按复制文本

一、安装插件
1、安装cordova-clipboard插件

$ ionic cordova plugin add cordova-clipboard
$ npm install --save @ionic-native/clipboard@4

2、将插件添加到app.module.ts中

...
import { Clipboard } from '@ionic-native/clipboard';
...
@NgModule({
  ...

  providers: [
    ...
    Clipboard
    ...
  ]
  ...
})

二、创建自定义指令
1、创建指令CopyClipboardDirective

ionic g derictive copyClipboard

2、定义CopyClipboardDirective，实现长按复制文本，兼容pc和手机

import { Directive,HostListener,ElementRef } from '@angular/core';
import { Clipboard } from '@ionic-native/clipboard';
import { Platform } from 'ionic-angular';

/**
 *长按复制到剪切板
 *兼容手机和PC
 *
 * @export
 * @class CopyClipboardDirective
 */

@Directive({
  selector: '[copyClipboard]'
})

export class CopyClipboardDirective {
  constructor(private clipboard: Clipboard,
    private platform: Platform,
    private element:ElementRef
  ) { 
  }

  //HostListener 是属性装饰器，一般用来为宿主元素添加事件监听
  //为宿主元素添加长按事件监听
  @HostListener('press', ['$event'])
  onPress() {
    let hostElement = this.element.nativeElement;   //宿主元素
    let copyText = hostElement.innerText;          //宿主元素内的文本
    
    if (this.platform.is('cordova')) {  //移动终端
      this.clipboard.copy(copyText).then(() => {
        alert('文字已复制');  //示例，建议使用toast
      });
    } else {   //PC页面
      console.info(copyText);
      let save = function (e) {
        e.clipboardData.setData('text/plain', copyText);   //保存到剪切板
        e.preventDefault(); //阻止默认行为
      }
      document.addEventListener('copy', save);
      document.execCommand("copy");     //使文档处于可编辑状态，否则无效
      alert('文字已复制'); //示例，建议使用toast
    }
  }
}

3、定义完指令后，需要在app.module.ts和相应的件模块中声明

...
import { DirectivesModule } from '../directives/directives.module'
...
@NgModule({
  ...

   imports: [
    ...
    DirectivesModule,
    ...
  ]
  ...
})

若要在xxx组件中使用，则除了在app.module.ts在声明，还需要在xxx.module.ts中声明,也是如上导入到imports中
4、声明完就可在xxx组件的页面中使用了，如

  <ion-list>
    <ion-item *ngFor="let comment of commentList" copyClipboard>
      <h5>
          {{comment.userName}} / {{comment.ithrId}}
           <span class="colorAaa">
                  于 {{comment.evaluateDate|tswWeek:'week'}}留言：
           </span>
      </h5>
      <p class="content">{{comment.content}}</p>
    </ion-item>
  </ion-list>

此示例中，宿主元素是ion-item,所以复制的内容就是其的innerText

最后编辑于：2019.04.03 17:38:48