时间戳

首页 > 解决方案 > 在Angular 2中将字符串复制到剪贴板

javascript - 在Angular 2中将字符串复制到剪贴板

问题描述

我有一种方法Angular2可以生成一个类似于requestPath. 单击按钮时，我需要将其复制requestPath到剪贴板。如何做到这一点？

我在这里遇到了多个复制到剪贴板的解决方案，但没有一个能满足我的需要。我没有要复制的元素textArea或任何元素。input只需复制一个简单的字符串变量onClick

我拥有的html是：

<td class="submitBtnCell">
    <button class="btn" (click)="createSharableLink()">Share</button>
</td>

和方法：

createSharableLink(){
    let requestPath = this.prepareRequestPathForVideos("shared");
    alert(requestPath); // need to copy this request path to clipboard       
}

标签： javascriptangulartypescriptclipboard.js

解决方案

这是我在以前的一个项目中使用的一个片段，它允许您将内容复制到剪贴板。

Carsten在下面也提到过。

// Copy Element Into Clipboard [ Can use "$(val).text()" as Argument ]
function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val(element).select();
    document.execCommand("copy");
    $temp.remove();
}

它将隐藏附加<input>到页面主体，将元素添加到其中，选择文本并用于execCommand复制所选文本。

使用您的代码，这是一个示例：

<td class="submitBtnCell">
    <button class="btn" (click)="createSharableLink()">Share</button>
</td>

createSharableLink(){
    let requestPath = this.prepareRequestPathForVideos("shared");
    //alert(requestPath); // need to copy this request path to clipboard   
    copyToClipboard(requestPath);  
}

参考：https ://angular.io/guide/rx-library#naming-conventions-for-observables

StackOverflow 链接： angular2 风格指南 - 带有美元符号的属性？

因为 Angular 应用程序大多是用 TypeScript 编写的，所以您通常会知道变量何时是可观察的。尽管 Angular 框架不强制执行 observables 的命名约定，但您经常会看到 observables 以尾随的“$”符号命名。

这在扫描代码和寻找可观察值时很有用。此外，如果您希望一个属性存储来自 observable 的最新值，则简单地使用带有或不带“$”的相同名称会很方便。

推荐阅读