Angular 角度2，Can'；t正确使用指令属性绑定来显示div box颜色/行为

我是学习Angular 2的新手

我正在尝试学习使用属性绑定的指令，以使用带有颜色的简单方框div复制鼠标进入/鼠标离开事件。我正在沿着我的方向走

理论上，@Input（'highlight'）应该允许我访问模板中的属性绑定，并将其绑定到模板中的特定颜色，如果我没有弄错的话。defaultColor也是如此。但它不起作用

突出显示.directive.ts

import { Directive, HostListener, HostBinding, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[dirHighlight]'
})
export class HighlightDirective {
  @HostListener('mouseenter') mouseover() {
    this.backgroundColor = this.highlightColor;
  };
  @HostListener('mouseleave') mouseleave() {
    this.backgroundColor = this.defaultColor;
  };
  @HostBinding('style.backgroundColor') get setColor() {
    return this.backgroundColor;
  };
  @Input() defaultColor = 'white';
  @Input('highlight') highlightColor = 'green';
  private backgroundColor: string;
  constructor() {}

  ngOnInit() {
    this.backgroundColor = this.defaultColor;
  }

}

app.component.html

<h1>Attribute Directive</h1>
<h2>NgClass / NgStyle</h2>
<div [ngStyle]="{'background-color': 'red'}">
</div>
<hr />
<h2>Custom Attribute Directives</h2>
<div dirHighlight [highlight]="'blue'" [defaultColor]="'red'"]>Some Text</div>

属性指令
NgClass/NgStyle

自定义属性指令
一些文本

Chrome中的错误消息：

Error: Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name.
    at DomRenderer.setElementAttribute (http://localhost:4200/vendor.bundle.js:41681:31)
    at DebugDomRenderer.setElementAttribute (http://localhost:4200/vendor.bundle.js:70770:24)
    at createRenderElement (http://localhost:4200/vendor.bundle.js:25732:18)
    at CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal (/AppModule/AppComponent/component.ngfactory.js:143:17)
    at CompiledTemplate.proxyViewClass.AppView.create (http://localhost:4200/vendor.bundle.js:72058:21)
    at CompiledTemplate.proxyViewClass.DebugAppView.create (http://localhost:4200/vendor.bundle.js:72510:44)
    at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:16:19)
    at CompiledTemplate.proxyViewClass.AppView.createHostView (http://localhost:4200/vendor.bundle.js:72071:21)
    at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (http://localhost:4200/vendor.bundle.js:72527:52)
    at ComponentFactory.create (http://localhost:4200/vendor.bundle.js:38612:25)
    at ApplicationRef_.bootstrap (http://localhost:4200/vendor.bundle.js:36546:57)
    at http://localhost:4200/vendor.bundle.js:36365:89
    at Array.forEach (native)
    at PlatformRef_._moduleDoBootstrap (http://localhost:4200/vendor.bundle.js:36365:42)
    at http://localhost:4200/vendor.bundle.js:36317:27

zone.js:420 Unhandled Promise rejection: Error in ./AppComponent class AppComponent - inline template:7:4 caused by: Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name. ; Zone: <root> ; Task: Promise.then ; Value: ViewWrappedError {__zone_symbol__error: Error: Error in ./AppComponent class AppComponent - inline template:7:4 caused by: Failed to execute…, _nativeError: ZoneAwareError, originalError: DOMException: Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name.
    …, context: DebugContext, __zone_symbol__stack: "Error: Error in ./AppComponent class AppComponent …t http://localhost:4200/vendor.bundle.js:36317:27"…} Error: Error in ./AppComponent class AppComponent - inline template:7:4 caused by: Failed to execute 'setAttribute' on 'Element': ']' is not a valid attribute name.

ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent - inline template:7:…, rejection: ViewWrappedError, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}

错误：未能对“元素”执行“setAttribute”：“]”不是有效的属性名称。
在DomRenderer.setElementAttribute处(http://localhost:4200/vendor.bundle.js:41681:31)
在DebugDomRenderer.setElementAttribute处(http://localhost:4200/vendor.bundle.js:70770:24)
在创建渲染时(http://localhost:4200/vendor.bundle.js:25732:18)
在CompiledTemplate.proxyViewClass.View_AppComponent0.createInternal（/AppModule/AppComponent/component.ngfactory.js:143:17）
在CompiledTemplate.proxyViewClass.AppView.create(http://localhost:4200/vendor.bundle.js:72058:21)
在CompiledTemplate.proxyViewClass.DebugAppView.create(http://localhost:4200/vendor.bundle.js:72510:44)
在CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal（/AppModule/AppComponent/host.ngfactory.js:16:19）
在CompiledTemplate.proxyViewClass.AppView.createHostView(http://localhost:4200/vendor.bundle.js:72071:21)
在CompiledTemplate.proxyViewClass.DebugAppView.createHostView(http://localhost:4200/vendor.bundle.js:72527:52)
在ComponentFactory.create(http://localhost:4200/vendor.bundle.js:38612:25)
在ApplicationRef.引导时(http://localhost:4200/vendor.bundle.js:36546:57)
在http://localhost:4200/vendor.bundle.js:36365:89
at Array.forEach（本机）
at平台参考模块引导(http://localhost:4200/vendor.bundle.js:36365:42)
在http://localhost:4200/vendor.bundle.js:36317:27
zone.js:420未处理的承诺拒绝：./AppComponent类AppComponent-内联模板：7:4中的错误，原因是：未能在“元素”：“]”上执行“setAttribute”不是有效的属性名称；区域：；任务：承诺；值：ViewWrappedError{{uuuuuuuuuuuuuuuuuuuuuuuu区域\符号\错误：错误：./AppComponent类AppComponent-内联模板：7:4中的错误，原因是：未能执行…，\u nativeError:ZoneAwareError，originalError:DomeException:未能在“元素”：“]”上执行“setAttribute”不是有效的属性名称。
…，context:DebugContext，_区域_符号__堆栈：“错误：./AppComponent类AppComponent…t中的错误http://localhost:4200/vendor.bundle.js:36317:27“..}错误：./AppComponent类AppComponent-内联模板：7:4中的错误，原因是：未能在“元素”上执行“setAttribute”：“]”不是有效的属性名称。
ZoneAwareError{{uuuuuu zone\u symbol\uuuuuuu错误：错误：未捕获（承诺中）：错误：./AppComponent类AppComponent-内联模板中的错误：7:…，拒绝：ViewWrappedError，承诺：ZoneAwarePromise，区域：区域，任务：ZoneTask}

看起来像

]

就在

一些文本之前是多余的
看起来像
]
就在
一些文本之前是多余的
你有错误消息吗？更新错误！您是否有错误消息？已更新错误！非常感谢你！非常感谢你！