前端之家收集整理的这篇文章主要介绍了
angular2 ngx-clipboard 复制剪贴板,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
1、 下载安装插件
如果使用的是angular2,不是angular4 那么安装 ngx-clipboard@7.x.x版本
@H_
403_3@npm install ngx-clipboard@7.0.1 --save
2、module.ts文件中引入
@H_
403_3@...
import {ClipboardModule} from 'ngx-clipboard';
@NgModule({
declarations: [
AppComponent
],imports: [
BrowserModule,FormsModule,HttpModule,ClipboardModule
],...
3、html文件中引入使用
参数说明
ngxClipboard 必须 添加复制功能
[cbContent]="text" 必须 text是要复制标签的ngModel,也就是要复制的内容,可以随便定义,不一定是那个model
(cbOnSuccess) 可选 复制成功以后调用的函数
@H_
403_3@<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>