Angular 2、无法正确使用Directive Attribute绑定显示div框color/behavior

Question

我是新手学习Angular2.

我正在尝试学习具有属性绑定的指令来复制鼠标 enter/mouse 留下带有颜色的简单框 div 的事件。我正在学习 Udemy 上的课程。

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

highlight.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>

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}

Answer 1

看起来 ] 在 Some Text 之前是多余的。

Angular 2、无法正确使用Directive Attribute绑定显示div框color/behavior

Angular 2, Can't use Directive Attribute binding properly to display div box color/behavior

components

angular2-directives

angular