而我的指令@Directive({ selector:'[myDirective]'})export class MyDerective { @HostBinding('class.img') isMyCirclePic:" />

角@Hostbinding不起作用

angular angular2-directives angular2-hostbinding

847 观看

1回复

我和其他问题一样,@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第一次未定义。之后将其设置为true或false。我多次使用相同的模板,并且当我单击其他模板(来自相同类型的模板)时,isMyCirclePic也未定义。
  2. 我正在事件中更改是非,但不会渲染。我的“ 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函数将被调用,正如我所期望的那样。所以我看不到任何变化。

作者: Roma Kap 的来源 发布者: 2019 年 10 月 13 日

回应 (1)


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>
作者: Julia Passynkova 发布者: 24.04.2017 03:44
32x32