我与@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);
}
}
- 问题是，我的 isMyCirclePic 是第一次未定义。之后它将被设置为真或假。我多次使用相同的模板，当我单击其他模板（来自同一种模板）时，myCirclePic 也未定义。
- 我在事件中改变真或假，但它不会被渲染。我的“class.img”图片每次都保持相同的值。
更新
我已经尝试了@Input @HostBinding 的解决方案。
<main class="my_active">
<user
myDerective
[myColor]="font_color">
</user>
</main>
还有我的 myColor-Directive：
@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-function 将被调用。但我看不到，get-function 将被调用，正如我所期望的那样。所以我看不到任何变化。