앵귤러 머티리얼로 클립보드에 복사하는 방법
4739 단어 codeverangularjavascript
click
이벤트를 사용하여 처리 함수에 텍스트를 전달합니다. 이 경우에는 copyToClipboard(bookmark.location)
<span class="btn-light btn-sm" (click)="copyToClipboard(bookmark.location)" title="Copy link to clipboard">
<i class="far fa-copy copy-link"></i><span class="copy-btn-text">{{copyLinkButtonText}}</span>
</span>
프로그래밍 방식으로 문자열을 복사하려면 텍스트를 사용자의 클립보드에 복사하는 서비스
Clipboard
를 사용하십시오.setTimeout
를 사용하여 사용자에게 복사가 성공했음을 잠시 동안 시각적으로 알립니다.import { Clipboard } from '@angular/cdk/clipboard';
export class BookmarkListElementComponent {
copyLinkButtonText = '';
constructor(private router: Router,
private clipboard: Clipboard) {}
copyToClipboard(location: string) {
const copied = this.clipboard.copy(location);
if (copied) {
this.copyLinkButtonText = ' Copied';
setTimeout(() => this.copyLinkButtonText = '', 1300);
}
}
}
www.codever.land에서 작동 상태를 확인하십시오.
더 긴 텍스트에 사용하는 방법은 참조 링크(공식 문서)를 참조하십시오.
참조 -
https://material.angular.io/cdk/clipboard/overview
Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.
Reference
이 문제에 관하여(앵귤러 머티리얼로 클립보드에 복사하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codever/how-to-copy-to-clipboard-with-angular-material-317k텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)