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属性：

在这里您可以阅读有关property binding的更多信息

举个例子，您有几个选择

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

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

1 个答案: