Угловые 2, не может использовать Директиву атрибутов привязки правильно отображать Диво окно цвета/Поведение

Question

Я новичок обучением Угловых 2.

Я пытаюсь узнать директивы с атрибутом связывания для репликации мыши ввести/мыши оставляют события с помощью простых полевых div с цветами на них. Я следую по курсу Удэми.

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