9

我在udemy的angular2课程中学习angular2，老师写了一个突出显示 html 元素的指令。

我试图做休闲，但对我来说_renderer.setElementStyle抛出异常。

例外：类型错误：无法在 [null] 中设置未定义的属性“背景颜色”

指令：

import {Directive, ElementRef, Renderer, OnInit} from 'angular2/core';

@Directive({
    selector: '[highlight-directive]'
})

export class HighlightDirective implements OnInit{
    private _defaultColor= 'green';

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

    ngOnInit(): any {
        this._renderer.setElementStyle(this._elmRef, "background-color", this._defaultColor);
        //this._elmRef.nativeElement.style.backgroundColor = this._defaultColor; //this way works fine.
    }
}

我使用指令的模板：

template: `
    <div highlight-directive>
        Highlight me
    </div>
    <br>
    <div highlight-directive>
        2 Highlight me 2
    </div>
`,

教师工作区： 在此处输入图像描述

谁能发现我做错了什么？

谢谢。

4

4 回答 4

22

正如@NirSchwartz 所建议的那样

由于 beta.1 Renderer 不再需要 a ElementRef，而是 a nativeElement，因此添加背景颜色的 Renderer 行应如下所示

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

您可以在他们的CHANGELOG中检查所有这些更改。具体到您的情况，您应该检查beta.1的更改日志（重大更改部分）

于 2016-02-21T14:31:00.337 回答
3

查看教师工作区的第 10 行：
private _defaultColor:'red';//不起作用；
private _defaultColor ='red';// 工作; 当然在第 16 行
使用表达式
this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);

于 2016-03-26T13:22:23.493 回答
2

提供的答案对我不起作用我不得不改变

 private _defaultColor :'green';

至

 private _defaultColor ='green';

我也意识到改变以下也有效

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

至

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

我还是不知道为什么

于 2016-03-29T14:47:10.640 回答
1 
private _defaultColor :'green';
this._renderer.setElementStyle(this._elRef.nativeElement, 'background-color', this._defaultColor);

这不起作用，因为您从未实际设置过 property 的 VALUE _defaultColor。请记住，冒号后面的部分TypeScript是属性TYPE，而不是值。 例如（并且要成为指定变量类型的坚持者）：

private _defaultColor: string = 'green';

这很好用（我个人更喜欢使用这种语法，即使没有它，属性将默认为字符串）。

于 2016-04-20T05:45:23.057 回答