آموزش Angular CDK: کپی در کلیپ بورد

وقتی چیزهایی را با Angular می‌سازیم، اغلب نیاز به انجام کارهایی داریم که هر روز در وب یا سایر برنامه‌ها می‌بینیم. برای مثال، مانند کپی کردن متن در کلیپ بورد. اگر ما آن را از ابتدا ایجاد می‌کردیم، می‌توانست به کار کمی نیاز داشته باشد. اما یکی از مزایای کار با چارچوبی مانند angular این است که بسیاری از این مفاهیم کاربردی رایج قبلاً برای ما کشف شده و توسط خود فریمورک یا در این مورد Component Dev Kit (معروف به CDK) در دسترس قرار گرفته اند. بنابراین، در این مثال خواهیم دید که این کار به لطف CDK چقدر آسان است. باشه بریم سراغش

https://www.youtube.com/watch?v=yguZOK0OYzc

برنامه آزمایشی

برای مثال در این پست، ما با این برنامه آزمایشی، Petpix کار خواهیم کرد. این اپلیکیشنی است که افراد می توانند تصاویر جالبی از حیوانات خانگی خود به اشتراک بگذارند.

در اینجا، ما به یک گالری تصاویر نگاه می کنیم که در آن می توانیم بین تصاویر حرکت کنیم. در گوشه سمت راست بالای هر تصویر، یک دکمه اشتراک گذاری وجود دارد. وقتی روی این دکمه کلیک می کنیم، فرمی دریافت می کنیم که حاوی پیام و پیوندی به این تصویر است. یک دکمه کپی هم داریم.

در حال حاضر، دکمه کپی برای انجام کاری سیم‌کشی نشده است، بنابراین وقتی روی آن کلیک می‌کنیم هیچ اتفاقی نمی‌افتد. و، احتمالاً کاملاً واضح است، اما ما می‌خواهیم این دکمه محتویات فیلد فرم را در کلیپ‌بورد کاربر کپی کند تا آنها بتوانند آن را در یک پیام متنی، یا ایمیل یا چیز دیگری جای‌گذاری کنند.

خوب، این دقیقاً همان کاری است که ما در این مثال می خواهیم انجام دهیم، و انجام آن نیز بسیار آسان خواهد بود.

نصب Angular CDK

خوب، از آنجایی که ما از CDK استفاده می کنیم، باید مطمئن شویم قبل از انجام هر کار دیگری، آن را با استفاده از دستور زیر نصب می کنیم.

npm i @angular/cdk

اکنون هنگامی که آن را نصب کردیم، می‌توانیم از ماژول کلیپ بورد برای انجام دقیقاً آنچه نیاز داریم استفاده کنیم. و به طور خاص، ما از آن استفاده خواهیم کرد cdkCopyToClipboard دستورالعمل روی دکمه کپی ما.

خوب، بیایید به کدی نگاه کنیم.

کد موجود

بیایید با نگاه کردن به الگوی مؤلفه لغزنده شروع کنیم که حاوی نشانه گذاری و منطق برای گالری تصاویر ما است. در این الگو یک عبارت switch داریم که برای تعیین اینکه کدام تصویر و محتوای نمایش داده شود استفاده می شود.

slider.component.html

 ... class="image">
    @switch(selectedImage()) {
        @case(1) { 
            ...
        }
        @case(2) { 
            ...
        }
        @case(3) { 
            ...
        }
        @case(4) { 
            ...
        }
    }

برای هر یک از تصاویر، یک جزء اشتراک گذاری داریم که تصویر را می پیچد. این جزء اشتراک‌گذاری دارای یک ورودی «پیام» است که ما از آن برای ارسال یک پیام و یک URL استفاده می‌کنیم. اکنون در یک برنامه واقعی، این یک پیوند واقعی به خود تصویر است، اما برای این مثال، فقط به این نسخه نمایشی پیوند می‌دهد.

 message="Hey, check out this cool image of a dog on a surfboard: https://stackblitz.com/edit/stackblitz-starters-ul93wc?file=src%2Fslider%2Fslider.component.html">
     src="/assets/2.jpg" alt="A dog on a surfboard" />

در مرحله بعد، بیایید نگاهی به مؤلفه اشتراک بیندازیم.

در اینجا ما دکمه اشتراک گذاری را داریم و زمانی که سیگنال “messageVisible” نادرست باشد، نمایش داده می شود. هنگامی که این دکمه کلیک می شود، مقدار سیگنال “messageVisible” را روی true تنظیم می کند.

share.component.html

@if (!messageVisible()) {
     (click)="messageVisible.set(true)">
        Share Image
    
} @else {
    ...
}

سپس، هنگامی که آن سیگنال درست باشد، منطقه “پیام” نمایش داده می شود که حاوی جعبه متن با پیام ما در آن است، و دکمه ای که برای کپی کردن این مقدار در کلیپ بورد استفاده می کنیم.

افزودن قابلیت «کپی در کلیپ بورد» با ماژول Angular CDK Clipboard

اکنون، قبل از اینکه بتوانیم از دستورالعمل استفاده کنیم، باید ماژول را به کامپوننت خود وارد کنیم، بنابراین اجازه دهید به تایپ اسکریپت سوئیچ کنیم. سپس، در آرایه واردات خود، ClipboardModule را اضافه می کنیم، و باید مطمئن شویم که به درستی از CDK وارد شده است.

share.component.ts

import { ClipboardModule } from '@angular/cdk/clipboard';

@Component({
  selector: 'app-share',
  ...
  imports: [ ..., ClipboardModule ]
})

خوب، حالا بیایید به الگو برگردیم. روی دکمه کپی، بیایید آن را اضافه کنیم cdkCopyToClipboard بخشنامه این دستورالعمل به یک مقدار متنی نیاز دارد که به عنوان ورودی ارسال شود، بنابراین ما مقدار ورودی “پیام” خود را از این جزء اشتراکی به آن ارسال می کنیم.

share.component.html

 [cdkCopyToClipboard]="message()">
    Copy

و همین، خیلی آسان است، درست است؟ این تمام چیزی است که برای ایجاد آن نیاز داریم تا این دکمه اکنون مقدار پیام ما را در کلیپ بورد کپی کند.

بنابراین، بیایید ذخیره کنیم و ببینیم چگونه کار می کند.

ما دکمه اشتراک گذاری و سپس دکمه کپی را می زنیم و در این مرحله تشخیص اینکه آیا کار می کند یا نه دشوار است. بنابراین، ما محتویات کلیپ بورد خود را در قسمت متنی در پایین صفحه قرار می دهیم.

و آنجاست، خیلی جالب است، درست است؟

اضافه کردن منطق پس از کپی شدن مقدار در کلیپ بورد با رویداد “کپی شده”

بنابراین انجام این کار جالب و آسان بود، اما کارهای بیشتری هم می‌توانیم با این دستورالعمل انجام دهیم. فرض کنید می خواهیم متن دکمه را از کلمه “کپی” به “کپی شده” تغییر دهیم، پس از کپی شدن مقدار در کلیپ بورد. خوب، ما می توانیم این کار را با cdkCopyToClipboardCopied رویدادی که از cdkCopyToClipboard دستورالعمل زمانی که مقدار کپی شد.

برای انجام این کار، بیایید یک سیگنال “کپی شده” اضافه کنیم که از آن برای تغییر متن در دکمه استفاده می کنیم. بیایید به آن مقدار اولیه false بدهیم.

share.component.ts

import { ..., signal } from "@angular/core";

@Component({
  selector: 'app-share',
  ...
})
export class ShareComponent {
    ...
    protected copied = signal(false);
}

خوب حالا بیایید به الگو برگردیم و آن را اضافه کنیم cdkCopyToClipboardCopied رویداد به دکمه کپی با دستورالعمل. هنگامی که رویداد فعال می شود، بیایید مقدار سیگنال “کپی شده” خود را روی true تنظیم کنیم.

share.component.html

    [cdkCopyToClipboard]="message()"
    (cdkCopyToClipboardCopied)="copied.set(true)">
    Copy

بنابراین ارزش آن ویژگی را تغییر می دهد، اکنون باید برچسب را عوض کنیم.

بیایید در اینجا به درون یابی رشته ای سوئیچ کنیم و از یک عملگر سه تایی با سیگنال “کپی شده” خود برای نمایش کلمه “کپی شده” در صورت درست بودن و “کپی” در صورت نادرست بودن آن استفاده خواهیم کرد.

    [cdkCopyToClipboard]="message()"
    (cdkCopyToClipboardCopied)="copied.set(true)">
    {{ copied() ? 'Copied!' : 'Copy' }}

بسیار خوب، ما می رویم، حالا بیایید ذخیره کنیم و این را امتحان کنیم.

ما روی دکمه اشتراک گذاری کلیک می کنیم و سپس روی دکمه کپی کلیک می کنیم. اکنون، برچسب دکمه باید از “کپی” به “کپی شده!” تغییر کند. و زمانی که پیست می کنیم، همچنان باید ببینیم که مقدار به درستی مانند قبل در کلیپ بورد ما کپی شده است.

نتیجه

بنابراین، همه اینها چقدر آسان بود؟ با تشکر از افرادی که بر روی Angular CDK کار می کنند، ما یک راه بسیار آسان برای کپی کردن موارد در کلیپ بورد خود با ماژول Clipboard داریم. و اکنون می دانید که چگونه از آن استفاده کنید!

اکنون ویژگی‌های بسیار بیشتری در Angular CDK موجود است، بنابراین منتظر پست‌های بیشتر در آینده باشید. همچنین، کانال یوتیوب من را بررسی کنید که در آن ویدیوهای بیشتری را در CDK و Angular به طور کلی خواهید یافت.

میخواهید آنرا در عمل ببینید؟

کد آزمایشی و نمونه هایی از این تکنیک ها را در مثال Stackblitz زیر بررسی کنید. اگر سوال یا نظری دارید، در نظرات خود دریغ نکنید.

این را مفید یافتید؟

اگر این مقاله برای شما مفید بود و می خواهید کمی عشق خود را نشان دهید، همیشه می توانید برای من یک قهوه بخرید!