각도 @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. 이벤트 내에서 true 또는 false가 변경되었지만 렌더링되지 않습니다. 제 '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으로 전달한다는 것을 알 수 있습니다. 나는 그 set-function이 호출된다는 것을 알 수있다. 하지만 나는 그 함수가 호출 될 것이라고 나는 예상 할 수 없다. 그래서 저는 변화가 없습니다.

Answer 1

당신은

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