引用时未定义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"的值appHighlight="blue"