Question

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

这是我的代码：

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);
    }
}

但是我在运行

时遇到以下异常

EXCEPTION：TypeError：无法设置属性＆＃39; background-color＆＃39;的未定义

我重新制作了问题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";

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

创建高亮指令时的EXCEPTION

1 个答案: