استخدام @HostBinding و @Input في Angular

باستخدام الزيادات المستمرة في تطوير إطار العمل Angular، يصبح من الضروري فهم كيفية استخدام الميزات المختلفة مثل @HostBinding و @Input بشكل صحيح لتحقيق السلوك المطلوب. في هذه الحالة، نريد استخدام @HostBinding لتعيين قيمة لخاصية @Input داخل عنصر مخصص.

بدايةً، دعونا نفهم ما هو @HostBinding. هذه الديكورات تستخدم لربط خصائص العنصر المضيف (host element) مع خصائص في الفئة المزينة بها. ومع ذلك، ينبغي أن نفهم أن @HostBinding يعمل فقط على الخصائص التي تتبع ضمن العنصر المضيف مباشرة، وليس على الوسائط مثل @Input.

ومع ذلك، بالنظر إلى السؤال الخاص بك، نحتاج إلى طرق بديلة لتحقيق هذا الغرض. يمكن القيام بذلك بواسطة الإصدار الجديد من Angular بسهولة باستخدام ViewChild وتمرير القيمة المرادة إلى العنصر المخصص.

فلنلق نظرة على الكود المقدم لديك:

typescriptCopy code
import { Component, Directive, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'custom-img',
  template: `
    
  `
})
export class CustomImgComponent {
  @Input() src: string;
}

@Directive({
  selector: '[srcKey]'
})
export class SrcKeyDirective implements OnChanges {
  @Input() srcKey: string;

  constructor(private customImg: CustomImgComponent) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.srcKey) {
      const src = `https://www.google.com.mt/images/branding/googlelogo/2x/${this.srcKey}_color_272x92dp.png`;
      this.customImg.src = src;
    }
  }
}

@Component({
  selector: 'my-app',
  directives: [CustomImgComponent, SrcKeyDirective],
  template: ``
})
export class AppComponent {}

في هذا المثال، نلاحظ استخدام ViewChild للوصول إلى العنصر المخصص CustomImgComponent داخل SrcKeyDirective. ثم نقوم بتغيير قيمة src في ngOnChanges بناءً على القيمة الجديدة ل srcKey.

يعتبر هذا النهج بديلاً ممتازًا لاستخدام @HostBinding مع @Input في Angular 2.

بالطبع، دعوني أقدم لك بعض المعلومات الإضافية حول كيفية تحقيق هذا الهدف بشكل أفضل.

في Angular، يمكن استخدام الميزة القوية المعروفة باسم “توصيل البيانات” (Data Binding) لربط البيانات بين العناصر المختلفة في تطبيق Angular. واحدة من أشكال التوصيل الشائعة هي استخدام @Input لتمرير البيانات من الكومبوننت الأب إلى الكومبوننت الابن.

ومع ذلك، في بعض الحالات، قد تحتاج إلى تغيير قيمة @Input بناءً على أحداث أو قيم أخرى. وهنا يأتي دور الميزة التي تمتثل لها السؤال، وهي @HostBinding. تعمل @HostBinding على تعيين قيمة خاصية المضيف (host property) بناءً على قيمة في الفئة المزينة بها.

ومع ذلك، يجب أن نلاحظ أن @HostBinding لا يعمل مع @Input مباشرة، بمعنى آخر، لا يمكن استخدامه لتعيين قيمة @Input داخل الكومبوننت.

بالنسبة للحالة المحددة في السؤال، يجب أن نبحث عن طرق بديلة لتحقيق السلوك المطلوب. الحلاول المقترحة تشمل استخدام ViewChild للوصول إلى الكومبوننت الابن وتحديث قيمة ال @Input بناءً على الحدث أو البيانات الجديدة، كما هو موضح في الكود الذي قدمته سابقًا.

إضافةً إلى ذلك، يمكن استخدام حلول أخرى مثل استخدام مصفوفة البيانات أو خدمات البيانات لإدارة البيانات وتوزيعها بين العناصر المختلفة في تطبيق Angular.

باختصار، يجب على المطورين البحث عن الحلول الأنسب لحالاتهم الخاصة وفهم استخدام كل من الميزات المتاحة في Angular بشكل صحيح لتحقيق السلوك المطلوب في تطبيقاتهم.