Angular指令问题

时间:2017-08-18 17:43:14

标签: angular angular2-directives

在模块中,我已声明该指令,但<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>

2 个答案:

答案 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';