Angular 角度指令问题

在模块中，我已经声明了指令，但是没有突出显示

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>

@输入highlightColor：字符串；在构造函数中检测到更改之前不可用。使用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;
    }
}

@输入highlightColor：字符串；在构造函数中检测到更改之前不可用。使用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;
    }
}

我想这样做：

@HostBinding'style.backgroundColor'@Input highlightColor:string； 不要忘记导入主机绑定：

从'@angular/core'导入{HostBinding}； 我想这样做：

@HostBinding'style.backgroundColor'@Input highlightColor:string； 不要忘记导入主机绑定：

从'@angular/core'导入{HostBinding}；