AUSNAHME beim Erstellen einer highlight-Direktive

Question

Ich versuche, eine einfache Direktive in Angular 2 zu erstellen, die den Inhalt innerhalb eines HTML-Elements hervorhebt.

Hier ist mein Code:

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic'; 
import {Component} from '@angular/core'; 
import {HighLightCmp} from "./highlight.component"; 

@Component({ 
    selector: 'app', 
    template: ` 

    <div highlight> 
     Highlight me. 
    </div> 
     `, 
    directives: [HighLightCmp] 
}) 
class AppCmp{ 

    constructor(){} 
} 

bootstrap(AppCmp); 

highlight.component.ts

import {ElementRef,Renderer,Directive,OnInit} from "@angular/core"; 

@Directive({ 
    selector: "[highlight]" 
}) 
export class HighLightCmp implements OnInit{ 

    private color: "green"; 

    constructor(private _elRef:ElementRef,private _renderer:Renderer){} 

    ngOnInit(){ 
     this._renderer.setElementStyle(this._elRef,"background-color",this.color); 
    } 
} 

Aber ich die folgende Ausnahme bekommen beim Laufen

EXCEPTION: TypeError: Cannot set property 'background-color' of undefined

ich wieder hergestellt, das Problem here on plunker

Sie die Fehlermeldung in der Konsole sehen können. Irgendwelche Gedanken?

Vielen Dank im Voraus.

Answer 1

einige Probleme

Die vor einiger Zeit geändert, vielleicht haben Sie dies in einem veralteten Beispiel finden. Seit einiger Zeit müssen die Renderer Methoden der nativeElement statt ElementRef weitergegeben werden:

this._renderer.setElementStyle(this._elRef.nativeElement, "background-color",this.color); 

Es gibt auch ein Fehler in der Variablendefinition

private color: "green"; 

sollte

private color:string = "green"; 

alternativer Ansatz sein (bevorzugt)

Eine bessere Möglichkeit, @HostBinding() zu verwenden wäre stattdessen

@Directive({ 
    selector: "[highlight]" 
}) 
export class HighLightCmp implements OnInit{ 

    @HostBinding('style.background-color') 
    private color: "green"; 
} 

@HostBinding() kann auch mit @Input() kombiniert werden, um den Wert von außen wie [highlight]="red" passiert:

@HostBinding('style.background-color') 
    @Input() 
    private color: "green"; 

Den einzigen Nachteil dieser Ansatz ist, dass die Stileigenschaften (oder Attribute und Klassen) Namen, die Sie binden möchten, zur Entwicklungszeit bekannt sein müssen, während mit Ihrem Renderer Ansatz, sie ca n dynamisch sein (zum Beispiel in eine @Input()