在Angular 2中将字符串复制到剪贴板答案

【问题标题】：Copy a String to clipboard in Angular 2在Angular 2中将字符串复制到剪贴板
【发布时间】：2018-10-12 07:09:28
【问题描述】：

我在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       
}

【问题讨论】：

我已经提到了那个链接，这不是必需的。

标签： javascript angular typescript clipboard.js

【解决方案1】：

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

下面的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 style guide - property with dollar sign?

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

这在扫描代码并寻找可观察的值。此外，如果您想要一个属性来存储最多来自可观察的最近值，可以方便地简单地使用同名，带或不带“$”。

【讨论】：

我是 Angular 新手。这里不知道怎么用$。
阅读参考资料罗杰，代码可以工作，$ 只是一个命名约定。
$ 在 Angular 中也被大量使用。它是作用域变量，但也适用于不同的上下文。
谢谢亚历克斯，但我正在谈论这个声明 $("<input>") 哪里出错了。
我猜这更像是一个 Jquery 上下文。

【解决方案2】：

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

【讨论】：