在Angular 2中使用@HostBinding对模板子元素进行mouseenter / mouseleave时更改主机类
411 观看
1回复
当我们在模板的子元素上触发mouseeneter / mouseleave事件时,是否有一种动态使用@HostBinding的方法,即:
在template.component.html中
<div class="test-btn"
(mouseenter)="mouseenter()"
(mouseleave)="mouseleave()">
</div>
并在template.component.ts中
@HostBinding('class') classes = this.getMouseClass();
哪里:
private getStateClass() {
const mouse = this.mouseState ? 'mouse-enter' : 'mouse-leave';
return `${mouse}`;
}
mouseenter() {
this.mouseState = true;
}
mouseleave() {
this.mouseState = false;
}
作者: anna olchowik
的来源
发布者: 2019 年 10 月 9 日
回应 (1)
0像
您只能使用以下方法添加/删除静态类 @HostBinding()
@HostBinding('class.myclass')
mouseState = false;
mouseenter() {
this.mouseState = true;
}
mouseleave() {
this.mouseState = false;
}
如果您需要动态类,则可以ElementRef
强制性地注入和添加/删除类。
constructor(elRef:ElementRef) {}
private setStateClass(bool add) {
this.elRef.nativeElement.classList.add('mouse-enter', add);
this.elRef.nativeElement.classList.add('mouse-leave', !add);
}
mouseenter() {
this.setStateClass(true);
}
mouseleave() {
this.setStateClass(false);
}
作者: Günter Zöchbauer
发布者: 27.02.2017 01:49
来自类别的问题 :
- 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中将属性指令应用于组件