Angular 5 - 复制到剪贴板

10 浏览
0 Comments

Angular 5 - 复制到剪贴板

我正在尝试实现一个图标，当点击时，将一个变量保存到用户的剪贴板。目前我已经尝试了几个库，但都无法实现这个功能。\n请问如何在Angular 5中正确地将一个变量复制到用户的剪贴板？

0

3 答案

0 Comments

问题的原因：

在Angular 5中，复制文本到剪贴板的代码无法在IE浏览器中正常工作，这是因为e.clipboardData在IE中未定义。

解决方法：

1. 在copyToClipboard函数中添加判断语句，如果浏览器是IE，使用window.clipboardData.setData('Text', item)来设置剪贴板的内容。

2. 修复removeEventListener的问题，将原始监听器作为参数传递给removeEventListener函数。

修复后的代码如下所示：

copyToClipboard(item) {
  if (window.clipboardData) {
    window.clipboardData.setData('Text', item);
  } else {
    document.addEventListener('copy', (e: ClipboardEvent) => {
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', (e: ClipboardEvent) => {});
    });
    document.execCommand('copy');
  }
}

然后在HTML中的点击事件中调用copyToClipboard函数：(click)="copyToClipboard('texttocopy')"。

需要注意的是，document.execCommand函数已经被弃用，建议使用更现代化的方法来操作剪贴板。

0
0 Comments

Angular 5 - 复制到剪贴板问题的原因和解决方法

在这个问题中，一个用户提到了在Angular 5中如何实现复制到剪贴板的功能。他们提供了一个自定义指令的解决方案，并建议使用ClipboardEvent，同时确保正确移除监听器。以下是解决方案的相关代码：

import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";

@Directive({

selector: '[copy-clipboard]'

})

export class CopyClipboardDirective {

@Input("copy-clipboard")

public payload: string;

@Output("copied")

public copied: EventEmitter = new EventEmitter();

@HostListener("click", ["$event"])

public onClick(event: MouseEvent): void {

event.preventDefault();

if (!this.payload)

return;

let listener = (e: ClipboardEvent) => {

let clipboard = e.clipboardData || window["clipboardData"];

clipboard.setData("text", this.payload.toString());

e.preventDefault();

this.copied.emit(this.payload);

};

document.addEventListener("copy", listener, false)

document.execCommand("copy");

document.removeEventListener("copy", listener, false);

}

}

使用上述自定义指令的示例代码如下：

Copy

public notify(payload: string) {

// 可以通知用户已将某些内容复制到剪贴板

console.info(`'${payload}' has been copied to clipboard`);

}

需要注意的是，在IE浏览器中，需要使用window["clipboardData"]代替e.clipboardData。

解决方案的其他注意事项：

- Safari浏览器在某些版本中存在问题，但可以通过创建范围并将范围添加到选择中来解决。

- 在IE浏览器中，window["clipboardData"]可能为undefined。

- 在移动设备上可能无法正常工作，可以考虑使用ngx-clipboard插件代替。

- document.execCommand方法已被弃用。

以上就是关于在Angular 5中实现复制到剪贴板功能的原因和解决方法的整理。

0
0 Comments

Angular 5 - 将内容复制到剪贴板问题的原因是，在Angular中没有内置的方法来直接复制文本到剪贴板。因此，需要使用一些解决方案来实现这个功能。

Solution 1: 复制任意文本

HTML:

<button (click)="copyMessage('This goes to Clipboard')" value="click to copy" >Copy this</button>

.ts 文件：

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

Solution 2: 从文本框复制

HTML:

 <input type="text" value="User input Text to copy" #userinput>
      <button (click)="copyInputMessage(userinput)" value="click to copy">Copy from Textbox</button>

.ts 文件：

    /* 复制文本框中的文本 */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Solution 3: 使用第三方指令 ngx-clipboard

<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>

Solution 4: 自定义指令

如果你喜欢使用自定义指令，可以查看 Dan Dohotaru 的 答案，这是一种使用 ClipboardEvent 实现的优雅解决方案。

Solution 5: Angular Material

Angular Material 9+ 用户可以利用内置的剪贴板功能来复制文本。还可以进行一些其他的定制，例如限制复制数据的次数。

以上是一些解决 Angular 5 - 将内容复制到剪贴板问题的方法。希望对你有所帮助！

0