在模块中,我已声明该指令,但<div>
未突出显示。
test.directive.ts
import { Directive, ElementRef, HostListener, Input } from "@angular/core";
@Directive({
selector: '[test]'
})
export class TestDirective {
@Input() highlightColor:string;
constructor(private el : ElementRef){
this.el.nativeElement.style.backgroundColor = this.highlightColor;
}
}
test.template.html
<div test highlightColor="red">directive testing</div>
答案 0 :(得分:2)
@Input() highlightColor:string;
不可用。使用ngOnChanges
生命周期钩子。
export class TestDirective {
@Input() highlightColor:string;
constructor(private el : ElementRef){ }
ngOnChanges() {
this.el.nativeElement.style.backgroundColor = this.highlightColor;
}
}
或者,如果你知道输入将始终是一个字符串,你可以使用@Attribute
而不是@Input
进入构造函数,如下所示:
export class TestDirective {
constructor(private el : ElementRef, @Attribute('highlightColor') color){
this.el.nativeElement.style.backgroundColor = color;
}
}
答案 1 :(得分:2)
我会这样做:
@HostBinding('style.backgroundColor') @Input() highlightColor:string;
<强> Plunker Example 强>
请勿忘记导入HostBinding
:
import { HostBinding } from '@angular/core';