typescript - Angular 6 attributdirektiv udefineret når refereret

Jeg prøver at forstå brugerdefinerede direktiver bedre, og derfor følger jeg en vejledning om, hvordan man bygger et brugerdefineret attributdirektiv. Men selvom jeg er ret sikker på, at jeg har fulgt vejledningen præcist, når jeg sætter mit direktiv til en værdi i skabelonen, kommer det stadig tilbage som undefined.

Her er den skabelon, der bliver brugt:

<div [appHighlight]='blue'>
 TESTING TESTING TESTING
</div>

Og her er koden til den brugerdefinerede direktiv, som gør farven grøn ved mouseover i stedet for blå, som er angivet i skabelonen.

import { Directive, Input, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class ColorDirective {
  @Input('appHighlight') hightlightColor: string;

  element: ElementRef;
  constructor(private el: ElementRef) {
   }

   @HostListener('mouseenter') onMouseEneter() {
     console.log(this.hightlightColor); //coming back as undefined
     this.hightlight(this.hightlightColor || 'green');
   }

   @HostListener('mouseleave') onmouseleave() {
     this.hightlight(null);
   }

   private hightlight( color: string) {
     this.el.nativeElement.style.color = color;
   }
}

Svar #1

Dette skyldes, at du sandsynligvis ikke har en variabel kaldet blue. Du ser, du bruger ejendomsbinding for at kalde din direktiv kræver værdien at være en komponentens ejendom.

Skriv en skabelonbindings-egenskab for at sætte en egenskab på et visningselement. Bindingen sætter egenskaben til værdien af et skabelonudtryk.

Den mest almindelige egenskabsbinding sætter en elements egenskab til en komponents egenskabsværdi. Et eksempel er at binde src-egenskaben af et billedelement til en komponents heroImageUrl-egenskab:

Her kan du læse mere om ejendomsbinding

For dit eksempel har du et par muligheder

  1. Du erklærer en variabel i din komponent med navnet red og tildeler en værdi til den;
  2. Når du kalder din direktiv med egenskabsbinding, kan du simpelthen bruge værdien som en streng, så i dit tilfælde vil [appHighlight]="'blue'" også fungere.
  3. Du bruger ikke ejendomsbinding, og det vil udsende en værdi som en streng appHighlight="blue"

Relaterede artikler