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 впервые не определен. После этого будет установлено значение false. Я использую один и тот же шаблон несколько раз, и когда я нажимаю на другой шаблон (из шаблона того же типа), то также не определен и MyCirclePic.
2. Я изменяю значение true или false в событиях, но оно не будет отображено. Моя картинка "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, что я и ожидал. Так что я не вижу изменений.

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>