Question

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

Answer 1

在构造函数中进行更改检测之前，

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

Answer 2

我会这样做：

@HostBinding('style.backgroundColor') @Input() highlightColor:string;

<强> Plunker Example

请勿忘记导入HostBinding：

import { HostBinding } from '@angular/core';

Angular指令问题

2 个答案: