我在 udemy 课程中为 angular2 学习 angular2 ,老师写了一个突出显示的指令一个HTML元素。
我试着休息,但对我来说 _renderer.setElementStyle
会抛出异常。
EXCEPTION:TypeError:无法设置属性' background-color'的 在[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>
`,
任何人都可以找到我做错的事吗?
感谢。
答案 0 :(得分:19)
正如@NirSchwartz
所建议的那样由于beta.1渲染器不再使用ElementRef
,而是nativeElement
,因此添加背景颜色的渲染器行应如下所示
this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);
的更改日志
答案 1 :(得分:3)
查看教师工作区的第10行:
private _defaultColor:'red';
//无法工作;
private _defaultColor ='red';
//工作;
当然,在第16行使用表达式{this._renderer.setElementStyle(this._elmRef.nativeElement, "background-color", this._defaultColor);
答案 2 :(得分: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');
我仍然不知道为什么
答案 3 :(得分:1)
private _defaultColor :'green';
this._renderer.setElementStyle(this._elRef.nativeElement, 'background-color', this._defaultColor);
这不起作用,因为您实际上从未实际设置属性_defaultColor
的值。请记住,TypeScript
中冒号后面的部分是属性TYPE
,而不是值。 例如(并且是关于指定变量类型的坚持者):
private _defaultColor: string = 'green';
这很好用(我个人更喜欢使用这种语法,即使没有它,属性也会默认为字符串)。