引用时未定义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的变量。您可以看到，您正在使用属性绑定来调用您的指令。该指令要求值为components属性。

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

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

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

对于你的例子，你有几个选择

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