앵귤러 머티리얼로 클립보드에 복사하는 방법

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.

좋은 웹페이지 즐겨찾기