美文网首页
ionic3 实现长按复制文本

ionic3 实现长按复制文本

作者: 风语菡 | 来源:发表于2019-04-03 17:21 被阅读0次

一、安装插件
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

相关文章

网友评论

      本文标题:ionic3 实现长按复制文本

      本文链接:https://www.haomeiwen.com/subject/lsagbqtx.html