Angular@Hostbinding不起作用

我对@Hostbinding和其他问题也有类似的问题，但我无法解决这个问题

我的模板：

<main class="my_active">


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

问题是，我的isMyCirclePic第一次没有定义。在这之后，它将被设置为true或false。我多次使用同一个模板，当我从同一个模板中单击其他模板时，isMyCirclePic也未定义。 我正在事件中改变真或假，但它不会被渲染。我的'class.img'-图片每次都保持相同的值。 更新

我已经试用了@Input@HostBinding的解决方案

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

---

但它仍然不起作用。我可以看到，该值将由@Input param传递。我可以看到，set函数将被调用。但我看不到，get函数将被调用，这是我所期望的。所以我看不到任何变化。

您可以使用@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>

---

谢谢。这是一个很好的解决方案，但是我应该可以在没有@input的情况下做到这一点。至少我可以使用它。你们可以重用指令的名称和它的名称，所以html看起来像[myDirective]=“false”和@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);
    }
}

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