typescript - Angular 6 attributdirektiv odefinierat när det refereras

Jag försöker förstå anpassade direktiv bättre och därför följer jag en handledning om hur man skapar ett anpassat attributdirektiv. Men även om jag är ganska säker på att jag har följt handledningen exakt, när jag sätter mitt direktiv till ett värde i mallen, kommer det fortfarande tillbaka som undefined.

Här är mallen som används:

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

Och här är koden för den anpassade direktiven, som gör färgen grön vid muspekning istället för blå, vilket anges i mallen.

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

Detta beror på att du troligen inte har en variabel som heter blue. Du förstår, du använder egenskapsbindning för att anropa din direktiv kräver värdet att vara en komponents egenskap.

Skriv en mallbunden egenskapsbindning för att ställa in en egenskap hos ett vy-element. Bindningen sätter egenskapen till värdet av ett mallexpressionsuttryck.

Den vanligaste egenskapsbindningen sätter en elements egenskap till värdet av en komponents egenskap. Ett exempel är att binda src-egenskapen hos ett bildelement till en komponents heroImageUrl-egenskap:

Här kan du läsa mer om egenskapsbindning

För ditt exempel har du ett par alternativ

  1. Du deklarerar en variabel i din komponent med namnet red och tilldelar ett värde till den;
  2. När du anropar din direktiv med property binding kan du helt enkelt använda värdet som en sträng, så i ditt fall kommer [appHighlight]="'blue'" också att fungera.
  3. Du använder inte egenskapsbindning, och det kommer att sända ett värde som en sträng appHighlight="blue"

Relaterade artiklar