ویژگی جدید Required Inputs در Angular v16

اکنون Angular 16 در دسترس است و مجموعه ای از ویژگی ها و پیشرفت های عالی را برای توسعه دهندگان به همراه دارد. در این مقاله، نگاهی دقیق تر به syntax جدیدInput@خواهیم داشت .

کلمه کلیدی Input یک دکوریتور انگولار است که به ما امکان می دهد یک property از کامپوننت را به یک ویژگی DOM در template متصل کنیم. هنگامی که Angular روند change detection را اجرا می کند، تغییرات DOM property را بررسی می کند و در صورت لزوم property کامپوننت را به روز می کند و مطمئن می شود که همیشه به روز است.

بیایید مثالی از استفاده از یک کامپوننت را در نظر بگیریم:

<app-child [name]=&quot'John'&quot></app-child>

ویژگیnameازDOM به یک پراپرتی از کامپوننت متصل می شود و در داخل کامپوننت می توانیم از مقدار Johnاستفاده کنیم.

در اینجا یک مثال از دیدگاه کامپوننت آورده شده است:

@Component({
  selector: 'app-child',
  template: `Name: {{name}}`
})
class ChildComponent {
  @Input() name: string;
}

با این حال، هیچ راه ساده ای برای اطمینان از اینکه مقدارname از کامپوننت پدر مشخص شده است وجود نداشت، که این اصلا ایده آل نبود.

<app-child></app-child>

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

@Component({
  selector: 'app-child[name]',
})
class ChildComponent {
  @Input() name: string;
}

با این حال، افزودن این مورد برای هر ویژگی ورودی می‌تواند فرآیند خسته‌کننده‌ای باشد.

ورودی های اجباری (Required Inputs)

خوشبختانه این مثال مربوط به گذشته است! Angular 16 ورودی های اجباری را معرفی می کند.

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

Required input 'name' from component ChildComponent must be specified

کد جدید به این صورت است:

@Component({
  selector: 'app-child',
  template: `Name: {{name}}`
})
class ChildComponent {
  @Input({ required: true }) name: string;
}

این requiredگزینه اختیاری است، بنابراین ما همچنان می توانیم ورودی های "اختیاری" را مانند قبل داشته باشیم.

@Component({
  selector: 'app-child',
  template: `Name: {{name}}`
})
class ChildComponent {
  // required input
  @Input({ required: true }) name: string;

  // basic input, not really required
  @Input() lastName: string;
}

نام مستعار (Aliasing)

همچنین یک مورد جالب از aliasing inputs وجود دارد، که در آن می‌خواهیم نامی متفاوت برای ویژگی DOM نسبت به نام ویژگی کامپوننت که به آن محدود شده است داشته باشیم.

برای انجام این کار، می‌توانیم یک نام مستعار اختیاری برای اتصال ویژگی DOM اضافه کنیم، همانطور که در زیر نشان داده شده است:

@Input() name: string;
@Input('lastname') surname: string;

برای اتصال ویژگی نام خانوادگی در الگو، باید از lastnameویژگی استفاده کنیم.

<app-child name=&quotJohn&quot lastname=&quotDoe&quot></app-child><>

از Angular 16، امکان اضافه کردن نام مستعار با استفاده از syntax جدید وجود دارد. این را می توان با اضافه کردن یک گزینه پیکربندی به ورودی انجام داد، همانطور که در زیر نشان داده شده است:

@Component({
  selector: 'app-child',
  template: `Name: {{heroName}}`
})
class ChildComponent {
  // required input with alias
  @Input({ required: true, alias: 'name'}) heroName: string;

  // basic input with alias 
  @Input({alias: 'lastname'}) heroSurname: string;
}

از ویژگی های جدید Angular 16 لذت ببرید! ?

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

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

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