Angular @Hostbinding不起作用

Question

我和@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是不确定的第一次。之后，它将被设定为虚假。我多次使用相同的模板，当我点击其他模板（来自同一类型的模板）时，所以isMyCirclePic也未定义。
2. 我在事件中改变了真或假，但它不会被渲染。我的'class.img'图片每次都保持相同的值。

UPDATE

我已经尝试了与@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传递。我可以看到，这个设置函数将被调用。但我看不到，那个get函数会被调用，我期望的。所以我看不到变化。

Answer 1

你可以使用@input（）@HostBinding

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

export class MyDerective { 
    @Input() @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); 
    } 
} 

将其绑定在tmeplate

<div myDirective [isMyCirclePic]="false"> 
      myDirective 
</div>