Angular 8中点击可点击元素绑定事件调用组件方法失效如何解决？

• 核心问题是Angular事件绑定语法使用错误：Angular 中绑定原生DOM事件时，直接使用事件的原始名称（去掉on前缀）即可，原生点击事件对应的绑定语法是(click)，而非(onClick)。
• 你写的(onClick)会被Angular识别为自定义的onClick事件，而非原生点击事件，所以点击元素时不会触发绑定的方法。由于Angular本身支持自定义事件绑定，因此编译器不会抛出错误，这也是你能正常编译但功能不生效的原因。

• 修正事件绑定语法即可，修改后的图标代码如下：

<i class="fa fa-question-circle" aria-hidden="true" (click)="viewHelpMultimedia()"></i>

• 如果修改后仍然不生效，可以排查以下边缘情况：
  • 检查该图标元素是否被其他上层元素遮挡，可临时给元素添加cursor: pointer样式，确认鼠标hover时是否出现手型光标，判断元素是否能接收点击事件
  • 检查是否在该元素或者父元素上添加了pointer-events: none样式，该属性会禁止元素响应所有鼠标事件

内容的提问来源于stack exchange，提问作者Claudia Martins