在项目中，偶尔会遇到将页面的文字复制到用户的剪切板中，方便用户操作，但是由于这种操作比较少，可能整个应用就一个地方或者两个地方，引入一个插件可能代价有点大。
创建一个组件
ng generate component copyToClipboard
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.less
(0 bytes
)
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.html
(36 bytes
)
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.spec.ts
(693 bytes
)
CREATE src/app/pages/copy-to-clipboard/copy-to-clipboard.component.ts
(312 bytes
)
UPDATE src/app/pages/pages.module.ts
(2939 bytes
)
修改组件的模版文件
<nz-content>
<label>这事要复制到剪切板的内容
</label>
<button nz-button>复制
</button>
</nz-content>
在组件的泪文件中添加复制的方法
import { Component
, OnInit
, Renderer2
} from '@angular/core';
import { NzNotificationService
} from 'ng-zorro-antd';
@
Component({
selector
: 'app-copy-to-clipboard',
templateUrl
: './copy-to-clipboard.component.html',
styleUrls
: ['./copy-to-clipboard.component.less']
})
export class CopyToClipboardComponent implements OnInit {
constructor(private notification
: NzNotificationService
) {
}
ngOnInit() {
}
public handleCopyToClipboard(copyWord
: HTMLElement
) {
const range
= document
.createRange();
range
.selectNode(copyWord
);
window
.getSelection().removeAllRanges();
window
.getSelection().addRange(range
);
document
.execCommand('copy');
this.notification
.success('复制成功～', '');
window
.getSelection().removeAllRanges();
}
}
这里notification是使用在复制成功以后给用户一个提示
将类文件中复制的函数与按钮点击事件绑定
<nz-content>
<label #copyWord>这事要复制到剪切板的内容
</label>
<button nz-button (click)="handleCopyToClipboard(copyWord)">复制
</button>
</nz-content>
效果如下
在GitHub中查看
