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);
    }
}

问题是，我的isMyCirclePic是第一次未定义。之后，它将被设置为false。我多次使用相同的模板，当我点击其他模板（来自同一种模板）时，myMyCirclePic也是未定义的。
我在事件中改变了真或假，但它不会被渲染。我的＃class; img＆＃39; -picture每次都保持相同的值。

更新

我已经使用@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。但是我无法看到，将会调用get函数，这是我所期待的。所以我认为没有变化。

Answer 1

你可以使用@Input（）@ ThemeBinding

@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>

Angular @Hostbinding不起作用

1 个答案: