将 Angular 2 (click) 属性全局添加到 CSS

Posted 2023-03-05

【中文标题】将 Angular 2 (click) 属性全局添加到 CSS

【英文标题】：Adding Angular 2 (click) attribute globally to CSS

【发布时间】：2017-06-09 15:07:48

【问题描述】：

在 Angular 1 中，您可以简单地添加

[ngClick],
[data-ng-click],
[x-ng-click] 
    cursor: pointer;

并且所有具有ng-click 属性的标签现在都将具有指针光标。我们如何以同样的方式添加 Angular 2 (click) 属性？

【参考方案1】：

仅使用属性名称是不可能的。 Angular 2 改变了这个模板：

<div>
    <h2>Hello name</h2>
    <div (click)="sayhi()"></div>
</div>

到这个 DOM：

 <div _ngcontent-xwy-0="">
     <h2 _ngcontent-xwy-0="">Hello Angular2</h2>
     <div _ngcontent-xwy-0=""></div>
  </div>

由于无法指定通配符属性名称 CSS 选择器（即 [_ngcontent-*] cursor: pointer ，因此无法仅使用 CSS 来实现。

【讨论】：

这是有道理的。我希望将来有办法解决这个问题。

您可以禁用视图封装。那么这是可能的。但不确定是否需要。

【参考方案2】：

<div href="javascript:void(0)" (click)="sayhi()"></div>

【讨论】：

这并不能真正回答问题；问题是关于使用 CSS 对具有 (click) 伪属性的元素进行样式设置。