Question

我在Angular2中有一个生成可共享链接的方法，类似于requestPath。单击按钮，我需要将此requestPath复制到剪贴板。如何实现？

我在这里遇到了多个copy-to-clipboard解决方案，但没有达到我的需要。我没有要复制的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       
}

Answer 1

出于安全原因，您无法直接访问剪贴板。您可以创建隐藏的输入元素，在其中设置文本并从中触发复制功能。

Answer 2

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

下面的forEach()也提到了。

// 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);  
}

参考：Carsten

StackOverflow链接： https://angular.io/guide/rx-library#naming-conventions-for-observables

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

这在扫描代码和查找时非常有用   可观察的价值观。此外，如果您想要一个属性存储最多   从一个可观察的最近值，它可以很方便简单地使用   带或不带“$”的相同名称。

将字符串复制到Angular 2中的剪贴板

2 个答案: