فرادرسکامپوننت دکمه با قابلیت استفاده مجدد در انگولار — از صفر تا صد
یکی از نخستین دغدغه‌های یک توسعه‌دهنده خوب وب نوشتن کد تمیز و جلوگیری از تکرار کد است. این راهبرد در زمان توسعه اپلیکیشن‌های بزرگ و مقیاس‌پذیر که ممکن است در آینده با معرفی قابلیت‌های جدید گسترش یابند، ضرورتی دو چندان می‌یابد. در این مقاله با روش ساخت یک کامپوننت دکمه با قابلیت استفاده مجدد در انگولار آشنا می‌شویم.
کامپوننت‌های با قابلیت استفاده مجدد بسیار مهم هستند و تفاوت بین یک پروژه موفق و پروژه با بدهی فنی بالا را تعیین می‌کنند. کامپوننت دکمه‌ای که در این مقاله می‌سازیم، می‌تواند بر اساس پیکربندی ارائه شده، یک دکمه متنی یا تصویری را نمایش دهد.
گام 1: ساختار پایه
قبل از هر چیز باید بگوییم که وقتی در مورد ساختار یک کامپوننت با قابلیت استفاده مجدد تأمل می‌کنیم، باید همه کاربردهایی که می‌تواند داشته باشد را در نظر داشته باشیم.
در مورد یک دکمه با قابلیت استفاده مجدد، باید یک کامپوننت ارائه‌ای (یا dumb) بسازیم که پیکربندی صحیح را از کامپوننت والد خود می‌گیرد.
1import { Component, OnInit, Input } from '@angular/core';
2
3@Component({
4 selector: 'app-button',
5 templateUrl: './button.component.html',
6 styleUrls: ['./button.component.scss']
7})
8export class ButtonComponent implements OnInit {
9 @Input() buttonConfig: any;
10 constructor() {}
11
12 ngOnInit() {}
13}شیء buttonConfig استایل‌بندی و اطلاعاتی اضافی در مورد نوع دکمه‌ای که می‌خواهیم رندر کنیم، ارائه می‌کند. اگر بخواهیم یک دکمه متنی داشته باشیم، buttonConfig شامل یک مشخصه text خواهد بود و در غیر این صورت اگر بخواهیم یک دکمه تصویری داشته باشیم، در پیکربندی یک منبع تصویر معرفی می‌کند.
کد HTML شامل دو قالب متفاوت خواهد بود که یکی برای دکمه متنی و دیگری برای دکمه تصویری است. با استفاده از الگوی ngTemplateOutlet می‌توانیم تعیین کنیم که چه زمانی هر کدام از آن‌ها باید رندر شوند. در این مورد اگر پیکربندی شامل مشخصه text باشد، قالب #text رندر می‌شود و در صورت عدم وجود مشخصه text قالب #image رندر خواهد شد.
1
2<ng-container *ngTemplateOutlet="buttonConfig['text'] ? text : image">
3</ng-container>
4
5<!-- Text Button -->
6<ng-template #text>
7
8</ng-template>
9
10<!-- Image Button -->
11<ng-template #image>
12
13</ng-templateگام 2: مارکاپ دکمه‌ها
اکنون که قالب‌ها آماده هستند، می‌توانیم آن‌ها را با کد دکمه‌ها پر کنیم. چنان که در کد زیر می‌بینید، دکمه متنی مشخصه buttonConfig.text را از طریق میان‌یابی نشان می‌دهد. دکمه تصویری صرفاً یک تصویر قالب کلیک نمایش می‌دهد که دارای مشخصه buttonConfig.src به عنوان منبع تصویر است.
1<ng-container *ngTemplateOutlet="buttonConfig['text'] ? text : image">
2</ng-container>
3
4<!-- Text Button -->
5<ng-template #text>
6 <button type="button"
7 [ngStyle]="buttonConfig.styles"
8 (click)="onTextBtnClick()">
9 {{ buttonConfig.text | uppercase}}
10 </button>
11</ng-template>
12
13<!-- Image Button -->
14<ng-template #image>
15 <img alt="image button"
16 [src]="buttonConfig.src"
17 [ngStyle]="buttonConfig.styles"
18 (click)="onImgBtnClick()">
19</ng-template>گام 3: پیکربندی
اکنون که کامپوننت دکمه آماده دریافت پیکربندی‌اش به عنوان ورودی است، می‌توانیم استایل‌های سفارشی را در کامپوننت والد تعریف کنیم. در این مورد می‌خواهیم یک شیء textBtnConfig و یک شیء imgBtnConfig ایجاد کنیم که شیوه استفاده از کامپوننت دکمه برای رندر کردن دو وهله متفاوت را به صورت همزمان با پیکربندی‌های مختلف نمایش می‌دهد.
باید توجه داشته باشید که چون ما استایل‌بندی CSS را در یک شیء تایپ اسکریپت اعلان می‌کنیم، باید از قالب camelCase در مورد نامگذاری مشخصه‌ها استفاده کنیم. از این رو ‘background-color’ به صورت ‘backgroundColor’ در می‌آید و در موارد دیگر هم به این شیوه عمل می‌کنیم.
1import { Component } from '@angular/core';
2
3@Component({
4 selector: 'app-root',
5 templateUrl: './app.component.html',
6 styleUrls: ['./app.component.scss']
7})
8export class AppComponent {
9 message = 'Click on a button';
10 textBtnConfig = {
11 styles: {
12 position: 'relative',
13 width: '150px',
14 height: '60px',
15 backgroundColor: '#f92672',
16 color: '#fff',
17 fontFamily: 'sans-serif',
18 fontSize: '20px',
19 borderRadius: '10px',
20 marginTop: '30px'
21 },
22 text: 'Click Here'
23 };
24
25 imgBtnConfig = {
26 styles: {
27 position: 'relative',
28 width: '100px',
29 height: '100px'
30 },
31 src: './assets/conversation.png'
32 };
33
34 onClickEventReceived(event: string) {
35 this.message = event;
36 }
37}گام 4: رندر کردن
در نهایت می‌توانیم کامپوننت دکمه را برای وهله‌سازی دو دکمه در کامپوننت والد مورد استفاده قرار دهیم:
1<section>
2 <h1>DIFFERENT BUTTONS, SAME COMPONENT!</h1>
3 <span>{{message}}</span>
4 <div class="btns-container">
5 <app-button [buttonConfig]="textBtnConfig"
6 (textBtnClickEmt)="onClickEventReceived($event)"></app-button>
7 <app-button [buttonConfig]="imgBtnConfig"
8 (imgBtnClickEmt)="onClickEventReceived($event)"></app-button>
9 </div>
10 <div class="copyright">
11 <span>Code by Alessia Amitrano.</span>
12 <span>
13 Icons made by <a href="https://www.flaticon.com/authors/freepik"
14 title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/"
15 title="Flaticon">www.flaticon.com</a></span>
16 </div>
17</section>زمانی که اپلیکیشن عرضه شد، نتیجه مانند تصویر زیر خواهد بود:
سخن پایانی
در این راهنما با شیوه ساخت یک کامپوننت با قابلیت استفاده مجدد در انگولار آشنا شدیم که می‌توان در موقعیت‌های متفاوتی از آن استفاده کرد. بدیهی است که این یک حالت ساده شده است، اما رویکردی را نشان می‌دهد که توسعه‌دهندگان می‌توانند برای هر چالشی از این دست مورد استفاده قرار دهند.
فکر کنید بدون استفاده از کامپوننت‌های با قابلیت استفاده مجدد مجبور هستیم چه مقدار کد تکراری بنویسیم. به علاوه کامپوننت‌های با قابلیت استفاده مجدد، امکان پیاده‌سازی قابلیت‌های جدید را برای هر وهله از کامپوننت با کمترین مقدار تغییرات کد فراهم می‌سازند. بدین ترتیب اگر بخواهیم متد جدیدی اضافه کنیم، مهم نیست که دکمه ما به صورت متنی یا تصویری است و در مورد هر نوع دکمه‌ای امکان انجام این کار وجود دارد. همه کدهای ارائه شده در این مقاله را می‌توانید در این ریپوی گیت‌هاب (+) ملاحظه کنید.
اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
- مجموعه آموزش‌های برنامهنویسی
- آموزش مقدماتی AngularJS برای ساخت اپلیکیشن های تک صفحه ای
- مدیریت تغییرات ذخیره نشده در انگولار — از صفر تا صد
- ساخت افزونه کروم با انگولار — از صفر تا صد
==
