捕获Angular2中的所有可点击元素?

尤瓦尔人

我想为cursor:pointer所有(click)定义了处理程序(或具有绑定到click事件的元素)添加css样式我相信在AngularJS上可以使用定义CSS [ng-click] { ... },对于Angular2 / 4是否有类似的解决方法?

yurzui

1)如果要向具有(click)处理程序的所有元素添加某些行为,则可以创建如下指令:

@Directive({
  selector: '[click]',
  host: {
    'style': 'cursor: pointer' // or class
  }
})
export class ClickableDirective {}

柱塞示例

2)要捕获所有具有click处理程序的元素,我会覆盖EventManager

import { Injectable, Inject, NgZone }      from '@angular/core';
import { EventManager, EVENT_MANAGER_PLUGINS } from '@angular/platform-browser';

@Injectable()
export class MyEventManager extends EventManager {
  constructor(@Inject(EVENT_MANAGER_PLUGINS) plugins: any[], private zone: NgZone) {
    super(plugins, zone);
  }

  addEventListener(element: HTMLElement, eventName: string, handler: Function): Function {
    if(eventName === 'click') {
      element.style.cursor = 'pointer'; // or add class
    }

    return super.addEventListener(element, eventName, handler);
  }
}

app.module.ts

  ...
  providers: [
    { provide: EventManager, useClass: MyEventManager }
  ]
})
export class AppModule {

柱塞示例

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使活动中的所有视图都可点击

Angular2获取点击的元素ID

Selenium:捕获可点击元素出现的 NoSuchElementException 是否有用?

如何识别段落中的链接并使其可点击 Angular 2

带有可点击链接的Android TextView:如何捕获点击?

Angular2:指令:捕获子级的点击事件

如何使用angular2 primeng使子元素在搜索中显示并在单击All时显示所有元素

从所有元素中删除点击事件

如何使HTML中的canvas元素可点击?

使div中的span元素可点击

Angular2 中的按钮点击验证

Angular2:动态地使文本的一部分可点击

在Angular2中捕获401异常

获取angular2中表单的所有值

如何清除Angular2中的所有输入字段

在带有Angular2的NativeScript中获取元素值

检测元素是否在Angular2中具有焦点

如何传递在 angular2/4 中点击的 dom 元素?

可点击的“ ChipField”元素

如何验证“n”个组合框中的所有下拉项都可点击?

Jetpack Compose:在 LazyColumn 中可点击带有 GlideImage 的元素时出现性能问题

禁用JavaFX中的所有父节点,同时使其所有子节点保持可点击状态

使用 z-index 时如何使链接可点击而不将所有其他元素的 z-index 变为负数?

电子中是否会有不可点击或点击的窗口?

Angular2限制所有航线

使所有以“ @”和“#”开头的单词都可点击

选择具有可点击图像组件的元素

Android:具有多个可点击按钮的ListView元素

Angular2中的分组元素* ngFor