javascript - 创建突出显示指令时出现异常

Question

我正在尝试在 Angular 2 中创建一个简单的指令，它突出显示 html 元素中的内容。

这是我的代码:

ma​​in.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);
    }
}

但是我在运行时遇到以下异常

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

问题我重现了here on plunker

您可以在控制台中看到错误消息。有什么想法吗？

感谢期待。

Answer 1

一些问题

这在不久前发生了变化，也许您会在一个过时的示例中找到它。一段时间以来，Renderer 方法需要传递 nativeElement 而不是 ElementRef:

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

变量定义也有错误

private color: "green";

应该是

private color:string = "green";

替代方法(首选)

更好的方法是使用 @HostBinding() 代替

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

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

@HostBinding() 也可以与 @Input() 结合使用，以便能够从外部传递值，如 [highlight]="red “:

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

此方法唯一的缺点是您要绑定(bind)到的样式属性(或特性和类)名称需要在开发时知道，同时使用您的Renderer 方法，它们可以是动态的(例如传递给 @Input()