angular2 ngx-clipboard 复制剪贴板

1、 下载安装插件
如果使用的是angular2,不是angular4 那么安装 ngx-clipboard@7.x.x版本

npm install ngx-clipboard@7.0.1 --save

2、module.ts文件中引入

...
import {ClipboardModule} from 'ngx-clipboard';

@NgModule({
  declarations: [
    AppComponent
  ],imports: [
    browserModule,FormsModule,HttpModule,ClipboardModule
  ],...

3、html文件中引入使用
参数说明

  1. ngxClipboard 必须 添加复制功能

  2. [cbContent]="text" 必须 text是要复制标签的ngModel,也就是要复制的内容,可以随便定义,不一定是那个model

  3. (cbOnSuccess) 可选 复制成功以后调用函数

<div class="input-group">
      <input type="text" class="form-control" [(ngModel)]="text" placeholder="请输入内容">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button" ngxClipboard [cbContent]="text" (cbOnSuccess)="successFun()">copy</button>
      </span>
</div>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...