一、安装插件
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
网友评论