클릭하면 사용자의 클립 보드에 변수를 저장하는 아이콘을 구현하려고합니다. 나는 현재 여러 라이브러리를 시도했지만 그중 어느 것도 그렇게 할 수 없었습니다.
Angular 5에서 사용자의 클립 보드에 변수를 올바르게 복사하려면 어떻게해야합니까?
클릭하면 사용자의 클립 보드에 변수를 저장하는 아이콘을 구현하려고합니다. 나는 현재 여러 라이브러리를 시도했지만 그중 어느 것도 그렇게 할 수 없었습니다.
Angular 5에서 사용자의 클립 보드에 변수를 올바르게 복사하려면 어떻게해야합니까?
답변:
해결 방법 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);
}
해결 방법 2 : TextBox에서 복사
HTML
<input type="text" value="User input Text to copy" #userinput>
<button (click)="copyInputMessage(userinput)" value="click to copy" >Copy from Textbox</button>
.ts 파일
/* To copy Text from Textbox */
copyInputMessage(inputElement){
inputElement.select();
document.execCommand('copy');
inputElement.setSelectionRange(0, 0);
}
해결 방법 3 : 타사 지시문 ngx-clipboard 가져 오기
<button class="btn btn-default" type="button" ngxClipboard [cbContent]="Text to be copied">copy</button>
솔루션 4 : 사용자 지정 지시문
사용자 지정 지시문 사용을 선호하는 경우를 사용하여 구현 된 우아한 솔루션 인 Dan Dohotaru의 답변 을 확인하십시오 ClipboardEvent
.
Cannot read property 'select' of undefined
각도 6에 들어갑니다.이 각도 6과 호환됩니까?
<input *ngIf="invitation_code" type="text" readonly value="{{invitation_code}}" #userinput > <button *ngIf="code_success" (click)="copyInputMessage(userinput)" value="click to copy" > Copy code </button>
감사합니다
position
, left
, top
,와 opacity
. 그리고로 교체selBox.style.height = '0';
나는 이것이 이미 여기에서 많이 투표되었다는 것을 알고 있지만, 차라리 사용자 지정 지시문 접근 방식을 선택하고 @jockeisorby가 제안한대로 ClipboardEvent에 의존하는 동시에 리스너가 올바르게 제거되었는지 확인합니다 (동일한 기능을 제공해야 함). 이벤트 리스너 추가 및 제거)
stackblitz 데모
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<string> = new EventEmitter<string>();
@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);
}
}
그런 다음 그대로 사용하십시오.
<a role="button" [copy-clipboard]="'some stuff'" (copied)="notify($event)">
<i class="fa fa-clipboard"></i>
Copy
</a>
public notify(payload: string) {
// Might want to notify the user that something has been pushed to the clipboard
console.info(`'${payload}' has been copied to clipboard`);
}
참고 : window["clipboardData"]
IE는 이해하지 못하므로 필요합니다.e.clipboardData
텍스트를 복사 할 때 이것이 훨씬 더 깨끗한 해결책이라고 생각합니다.
copyToClipboard(item) {
document.addEventListener('copy', (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (item));
e.preventDefault();
document.removeEventListener('copy', null);
});
document.execCommand('copy');
}
그런 다음 html의 클릭 이벤트에서 copyToClipboard를 호출하십시오. (클릭) = "copyToClipboard ( 'texttocopy')"
Angular Material v9부터는 이제 클립 보드 CDK가 있습니다.
다음과 같이 간단하게 사용할 수 있습니다.
<button [cdkCopyToClipboard]="This goes to Clipboard">Copy this</button>
이벤트 핸들러가 제대로 제거되지 않는 문제를 해결하는 jockeisorby의 답변 수정 버전.
copyToClipboard(item): void {
let listener = (e: ClipboardEvent) => {
e.clipboardData.setData('text/plain', (item));
e.preventDefault();
};
document.addEventListener('copy', listener);
document.execCommand('copy');
document.removeEventListener('copy', listener);
}
document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler
Angular 모듈을 사용하여이 작업을 수행 할 수 있습니다.
navigator.clipboard.writeText('your text').then().catch(e => console.error(e));
아래 방법은 메시지 복사에 사용할 수 있습니다.
export function copyTextAreaToClipBoard(message: string) {
const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
x.value = cleanText;
document.body.appendChild(x);
x.select();
document.execCommand('copy');
document.body.removeChild(x);
}
Angular에서이 작업을 수행하고 코드를 단순하게 유지하는 가장 좋은 방법은이 프로젝트를 사용하는 것입니다.
https://www.npmjs.com/package/ngx-clipboard
<fa-icon icon="copy" ngbTooltip="Copy to Clipboard" aria-hidden="true"
ngxClipboard [cbContent]="target value here"
(cbOnSuccess)="copied($event)"></fa-icon>
각도 cdk를 사용하여 복사,
Module.ts
import {ClipboardModule} from '@angular/cdk/clipboard';
프로그래밍 방식으로 문자열 복사 : MyComponent.ts,
class MyComponent {
constructor(private clipboard: Clipboard) {}
copyHeroName() {
this.clipboard.copy('Alphonso');
}
}
HTML을 통해 복사 할 요소를 클릭하십시오.
<button [cdkCopyToClipboard]="longText" [cdkCopyToClipboardAttempts]="2">Copy text</button>
첫 번째 제안 된 솔루션이 작동합니다. 변경하면됩니다.
selBox.value = val;
에
selBox.innerText = val;
즉,
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.innerText = val;
document.body.appendChild(selBox);
selBox.focus();
selBox.select();
document.execCommand('copy');
document.body.removeChild(selBox);
}