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

Question

我在 Angular2 中有一个方法可以生成一个类似于 requestPath 的可共享 link。单击按钮时，我需要将此 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       
}

Answer 1

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

Answer 2

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

下面 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

Whosebug Link: angular2 风格指南 - 属性带美元符号？

Because Angular applications are mostly written in TypeScript, you will typically know when a variable is an observable. Although the Angular framework does not enforce a naming convention for observables, you will often see observables named with a trailing “$” sign.

This can be useful when scanning through code and looking for observable values. Also, if you want a property to store the most recent value from an observable, it can be convenient to simply use the same name with or without the “$”.

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

Copy a String to clipboard in Angular 2

javascript

typescript

clipboard.js

angular