角@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に渡されることがわかります。私は、その機能が呼び出されることがわかります。しかし、私は見ることができない、その関数が呼び出される、私が期待しているもの。だから私は何の変化も見ない。

Answer 1

あなたは

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