角@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);
}
}
- 问题是,我的isMyCirclePic第一次未定义。之后将其设置为true或false。我多次使用相同的模板,并且当我单击其他模板(来自相同类型的模板)时,isMyCirclePic也未定义。
- 我正在事件中更改是非,但不会渲染。我的“ 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
来自类别的问题 :
- angular 如何查看我使用的Angular版本?
- angular AngularJS:如何清除URL中的查询参数?
- angular angular:根据模型中的布尔值切换按钮文本
- angular Angular 2:是否强制使用括号/方括号?
- angular 在最新的TypeScript(大概是v1.5)示例中,@(符号)是什么意思?
- angular Angular 2.0绑定到样式的值
- angular2-directives 例外:无法绑定到“ ngFor”,因为它不是已知的本机属性
- angular2-directives 在Angular中全局注册指令
- angular2-directives 角度异常:无法绑定到'ngForIn',因为它不是已知的本机属性
- angular2-directives Angular2没有Renderer提供程序!(NgModel->令牌NgValueAccessor-> DefaultValueAccessor->渲染器)
- angular2-directives Angular 2 @Output没有任何作用
- angular2-directives Angular2-在组件外部调用组件的方法
- angular2-hostbinding AoT编译中的Angular2主机绑定问题
- angular2-hostbinding 在Angular 2中使用@HostBinding对模板子元素进行mouseenter / mouseleave时更改主机类
- angular2-hostbinding 角度2:获取HTML元素的位置
- angular2-hostbinding 使用angular2 @HostListener时onbeforeunload确认对话框不显示
- angular2-hostbinding 角@Hostbinding不起作用
- angular2-hostbinding 在Angular 4中将属性指令应用于组件