تغییر در ورودی کامپوننت ها با تابع Transform در Angular 16

ورودی های کامپوننت ها ( ()input@ ) روشی برای برقراری ارتباط بین کامپوننت ها هستند. آنها برای انتقال داده ها از یک کامپوننت والد به یک کامپوننت فرزند استفاده می شوند.

مواقعی وجود دارد که می خواهیم مقدار یک ورودی کامپوننت را هنگامی که به کامپوننت فرزند ارسال می شود، تبدیل کنیم. برای مثال، می‌خواهیم یک تاریخ را قالب‌بندی کنیم، پیشوند یا پسوند به یک رشته اضافه کنیم، رشته را به عدد تبدیل کنیم یا یک رشته را به یک بولین تبدیل کنیم. این کار را می توانیم با استفاده از یک getter و یک setter این کار را انجام دهیم.

بیایید تبدیل یک رشته به یک بولین را به عنوان مثال در نظر بگیریم، زیرا این یکی از پرکاربردترین هاست.

const toBoolean = (value: boolean | string): boolean => {
 return value != null && `${value}` !== 'false';
};

@Component({ selector: 'app-test', template: `` })
export class TestComponent {
  _show = false;

 @Input() set show(v: boolean | string) {
 this._show = toBoolean(v);
  }

 get show() {
 return this._show;
  }
}

ما به این متد نیاز داریم، چون که می‌خواهیم از مقادیر بولین و رشته‌ای پشتیبانی کنیم، بنابراین می‌توان از آن به صورت های زیر استفاده کرد:

<app-test show />                 <!-- just setting the attribute -->
<app-test show=&quottrue&quot />     <!-- static attribute binding -->
<app-test [show]=&quottrue&quot />   <!-- dynamic attribute binding -->

این یک الگوی رایج است که ما در کامپوننت های خود استفاده می کنیم. هم اکنون با آمدن انگولار ۱۶ این کار میتوانیم از ویژگی Input transform@ برای تبدیل مقدار ورودی استفاده کنیم:

@Component({ selector: 'app-test', template: `` })
export class TestComponent {

 @Input({ transform: (v: boolean | string) => v != null && `${v}` !== 'false' }) 

 show: boolean = false;
}

همچنین می‌توانیم تابع تبدیل را به یک تابع جداگانه منتقل کنیم تا بتوانیم آن را در سایر کامپوننت ها مجدداً استفاده کنیم:

const toBoolean = (value: boolean | string): boolean => {
 return value != null && `${value}` !== 'false';
};

@Component({ selector: 'app-test', template: `` })
export class TestComponent {
 @Input({ transform: toBoolean }) show: boolean = false;
}

از آنجایی که تبدیل رشته ها به بولین یک چیز رایج است، Angular توابع داخلی را برای آن ها فراهم می کند. بنابراین ما قادر به انجام این کار به این صورت خواهیم بود:

import { booleanAttribute, numberAttribute } from '@angular/core';

@Component({ selector: 'app-test', template: `` })
export class TestComponent {
 @Input({ transform: booleanAttribute }) show: boolean = false;
 @Input({ transform: numberAttribute }) count: number = 0;
}

و به این شکل میتوانیم از آن استفاده کنیم :

<app-test show count=&quot1&quot />                   <!-- just setting the attribute -->
<app-test show=&quottrue&quot count=&quot1&quot />       <!-- static attribute binding -->
<app-test [show]=&quottrue&quot [count]=&quot1&quot />   <!-- dynamic attribute binding -->

همانطور که می بینیم، با این ویژگی جدید کارها بسیار آسان تر خواهد شد.

این مقاله برگردان شده یک مقاله معتبر درباره این موضوع است.برای دسترسی به مقاله منبع اینجا کلیک کنید.

برای مشاهده پست های بیشتر و ارتباط با من از طریق لینکدین اینجا کلیک کنید.

امیدوارم براتون مفید واقع شده باشه.