angular2 ngx-clipboard 复制剪贴板

一、 下载安装插件
若是使用的是angular2, 不是angular4 那么安装 ngx-clipboard@7.x.x版本,若是是ng4安装最新版本。html

npm install ngx-clipboard@7.0.1 --save

二、module.ts文件中引入npm

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

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

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

  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>
相关文章
相关标签/搜索