引用时未定义Angular 6属性指令

Question

我试图更好地理解自定义指令，因此我正在遵循有关如何构建自定义属性指令的教程。但是，即使我确定我完全按照本教程进行操作，但是当我将指令设置为模板中的值时，它仍会返回为undefined。

这是使用的模板：

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

这是自定义指令的代码，该指令在鼠标悬停时使颜色变为绿色，而不是模板中指定的蓝色。

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;
   }
}

Answer 1

这是因为您可能没有名为的变量blue。可以看到，您正在使用属性绑定来调用指令，要求该值成为组件属性。

编写模板属性绑定以设置视图元素的属性。绑定将属性设置为模板表达式的值。

最常见的属性绑定将元素属性设置为组件属性值。一个示例是将图像元素的src属性绑定到组件的heroImageUrl属性：

在这里您可以阅读更多有关属性绑定的信息

对于您的示例，您有两种选择

1. 您在名为的组件中声明一个变量，red并为其分配一个值。
2. 当使用属性绑定调用指令时，您可以简单地将值用作字符串，因此在您的情况下[appHighlight]="'blue'"也可以使用。
3. 您不使用属性绑定，它会发出一个值作为字符串 appHighlight="blue"