我和其他问题一样，@Hostbinding也有类似的问题，但是我无法解决。

我的模板：

<main class="my_active">


    <user myDirective="'false'">
    </user>
</main>

而我的指令

@Directive({
    selector:'[myDirective]'
})

export class MyDerective {


    @HostBinding('class.img')
    isMyCirclePic:boolean;

    @HostListener('mouseover')
    onMouseEnter(){
        console.log('VALUE BEFORE:', this.isMyCirclePic);
        console.log('MAUS ENTER');
        this.isMyCirclePic=true;
        console.log('VALUE AFTER:', this.isMyCirclePic);

    }

    @HostListener('mouseleave')
    onMouseLeave(){
        console.log('VALUE BEFORE:', this.isMyCirclePic);
        console.log('MAUS LEAVE');
        this.isMyCirclePic=false;
        console.log('VALUE AFTER:', this.isMyCirclePic);
    }
}

1. 问题是，我的isMyCirclePic第一次未定义。之后将其设置为true或false。我多次使用相同的模板，并且当我单击其他模板（来自相同类型的模板）时，isMyCirclePic也未定义。
2. 我正在事件中更改是非，但不会渲染。我的“ class.img”图片始终保持相同的值。

更新

我已经尝试使用@Input @HostBinding解决方案。

<main class="my_active">
    <user 
        myDerective
        [myColor]="font_color">
    </user>
</main>

而我的myColor-Direktive：

@Directive({
    selector:'[myColor]'
})
export class MyColor {

    @HostBinding('style.color')
    font_color:string;

    @Input()
    set myColor(color:string) {
        this.font_color = color;
        console.log('COLOR VALUE SET:', this.font_color);
    }

    get myColor():string{
        console.log('COLOR VALUE GET:', this.font_color);
        return this.font_color;
    }
}

但它仍然无法正常工作。我可以看到，该值将通过@ Input-param传递。我可以看到，将调用set函数。但我看不到，该get函数将被调用，正如我所期望的那样。所以我看不到任何变化。

作者: Roma Kap 的来源 发布者: 2019 年 10 月 13 日