69. توجيهات السمات المخصصة (متقدم)

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

السيناريو: لون خلفية متجاوب

إنشاء توجيه يحدد لون خلفية افتراضياً ولكنه يسمح بالتجاوزات، ويستخدم HostBinding لإدارة الأنماط بسهولة.

استخدام @HostBinding

@HostBinding هو مُزخرف خاصية يربط خاصية في فئة التوجيه مباشرة بخاصية عنصر المضيف (host element) (العنصر الذي يُطبق عليه التوجيه).

typescript // background.directive.ts import { Directive, HostBinding, Input, OnInit } from '@angular/core';

@Directive({ selector: '[appBackground]' }) export class BackgroundDirective implements OnInit {

// إدخال للون الافتراضي (لا يوجد اسم مستعار) @Input() defaultColor: string = 'transparent';

// إدخال للون التجاوز الاختياري @Input() appBackground: string = 'blue';

// استخدام HostBinding لربط خاصية 'backgroundColor' لنمط بخاصية داخلية @HostBinding('style.backgroundColor') backgroundColor: string = '';

ngOnInit(): void { // التهيئة بالإدخال المقدم أو الافتراضي this.backgroundColor = this.appBackground || this.defaultColor; }

// استخدام HostListener للتفاعل مع إجراءات المستخدم @HostListener('mouseenter') mouseover() { this.backgroundColor = 'lightgray'; }

@HostListener('mouseleave') mouseleave() { this.backgroundColor = this.appBackground || this.defaultColor; } }

الاستخدام

html

Gold Button

هذا النمط أنظف من الوصول يدوياً إلى ElementRef.nativeElement.style لكل خاصية.