Question

我在页面上有一个可点击的图标。点击这个图标，我想构建一些文本并将其复制到剪贴板中

<td><img src='./assets/Copy.gif' (click)="copyToClipboard()"  /></td>

并在组件

中

  copyToClipboard() {
     this.textToCopy = this.text1 + this.text2 + this.text3;  
     this.toastr.info('Copied to Clipboard');
  }

我看过https://www.npmjs.com/package/ngx-clipboard。但是，此包需要引用输入元素并从该输入元素复制文本。在我的用例中，需要动态创建文本，然后将其添加到剪贴板。

我可以使用ngx-clipboard复制到剪贴板，还是有其他包可以让我实现这个目的？

Answer 1

您需要对图片使用 ngxClipboard 指令。这就是您需要使用它来解决您的问题的方法：

<td>
    <img src='./assets/Copy.gif' (click)="copyToClipboard()" ngxClipboard [cbContent]="textToCopy" />
</td>

请务必在您的应用模块中添加 ClipboardModule 。示例代码如下：

import { ClipboardModule } from 'ngx-clipboard';

@NgModule({
  imports: [
    // Other Imports
    ClipboardModule
  ],
  // Other code
})
export class AppModule { }

Answer 2

执行document.execCommand时必须进行用户交互，function copyTextToClipboard(text) { var txtArea = document.createElement("textarea"); txtArea.id = 'txt'; txtArea.style.position = 'fixed'; txtArea.style.top = '0'; txtArea.style.left = '0'; txtArea.style.opacity = '0'; txtArea.value = text; document.body.appendChild(txtArea); txtArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Copying text command was ' + msg); if (successful) { return true; } } catch (err) { console.log('Oops, unable to copy'); } finally { document.body.removeChild(txtArea); } return false; }用于将文本复制到剪贴板。

查看我的answer。

如果您不想使用任何第三方库，可以使用以下代码段将文本复制到剪贴板。

copyToClipboard

更改copyToClipboard() { this.textToCopy = this.text1 + this.text2 + this.text3; var result = this.copyTextToClipboard(this.textToCopy); if (result) { this.toastr.info('Copied to Clipboard'); } }功能，如下所示，调用copyTextToClipboard函数

   $(".dropdown-menu li a").click(function () {
      $(".catbutton").html($(this).find('.geticon').html());
    });

Answer 3

这是复制到剪贴板的最简单方法。

在您的模板中

<button (click)="copyToClipboard(sharableLink)">Copy link</button>
<input type="text" value="This is the value to copy" #sharableLink>

在组件

中

copyToClipboard(element) {
    element.select();
    document.execCommand('copy');
    this.toaster('success', 'Success!', 'Link copied to clipboard.');
  }

Answer 4

这里是另一个快速而又脏的选项，无需第三方库或模块。 Taken from here

在您的模板中

<a class="accent" (click)="copyLink(textToCopy)">{{textToCopy}}</a>

在你的组件中

copyLink(text:string) {
        const event = (e: ClipboardEvent) => {
            e.clipboardData.setData('text/plain', text);
            e.preventDefault();
            // ...('copy', e), as event is outside scope
            document.removeEventListener('copy', e);
        }
        document.addEventListener('copy', event);
        document.execCommand('copy');
    }

Answer 5

ngx-clipboard现在不需要您使用输入元素。现在，它更加简单明了，并提供了几种实现方法。一种方法是简单地使用ClipboardService。从三篇开始，文档

import { ClipboardService } from 'ngx-clipboard'

constructor(private _clipboardService: ClipboardService){
...
}
copy(text: string){
  this._clipboardService.copyFromContent(text)
}

但是对于我来说，这是行不通的。而且我在编译时收到了一些警告，警告说没有满足同级依赖。自从我使用Angular 4以来，我就预料到了这些警告。但是，如果上述解决方案对您不起作用，则有一种使用@ViewChild进行此操作的简单方法。

在您的html中：

<textarea name="copyText" #copyText id="" style="opacity: 0;height: 0;"></textarea>

在组件中：

@ViewChild('copyText', { read: ElementRef }) copyText: ElementRef;

copyText() {
    const element = this.copyText.nativeElement;
    element.value = 'some text';
    element.focus();
    element.select();
    document.execCommand('copy');
}

这只是Angular的@ViewChild的简单香草javascript方法

Answer 6

使用NgxClipboard批准的答案存在问题（后来由OP突出显示），因为无法动态设置内容。

使用（点击）事件监听器不起作用，因为它是在ngxClipboard执行后触发的。

因此，只需使用@Input getter定义[cbContent]，然后忽略（click）事件：

在模板中：

<button ngxClipboard [cbContent]="foo">Click me</button>

在组件中：

@Input() get foo() { // Dynamic generation of the text to put in the clipboard: return this.text1 + this.text2 + this.text3 }

Angular 4 - 将文本复制到剪贴板

6 个答案: