Html 将段落内的字符串更改为大写的指令无效

我正在尝试编写一个指令，当您将鼠标悬停在段落上时，该指令会将段落内容转换为大写。我没有得到任何错误-它只是不工作。我以前也写过类似的代码，将文本高亮显示为某种颜色，这很有效。为什么将文本更改为大写时它也不起作用

filter.component.html

字符串到大写

改为大写.directive.ts

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
selector: '[appToUpperCase]'
})

export class ToUpperCaseDirective {

  constructor(public el: ElementRef) {

  }

  @HostListener('mouseenter2') onMouseEnter() {
     this.el.nativeElement.value = this.el.nativeElement.value.toUpperCase();
  }
}

---

编辑：正如@Ilya Rachinsky所建议的，我已将事件名称从

mouseenter2

更改为

mouseenter

，但它仍然不起作用。

您必须使用正确的事件名称-mouseenter而不是mouseenter2

您的指令结构看起来不错。我猜您忘了将其包含在模块上的声明列表中，因此该指令将可用于模板。此外，“p”元素上没有“value”属性，您需要按照前面的建议使用innerHTML

---

检查我的示例：

您的指令结构看起来很好。我猜您忘了将其包含在模块上的声明列表中，因此该指令将可用于模板。此外，“p”元素上没有“value”属性，您需要按照前面的建议使用innerHTML

---

查看我的示例：

谢谢您的回答！我最初将其更改为mouseenter2，因为我认为，如果有另一个同名事件，它可能无法工作。所以，是的，它不适用于mouseenter。我只是检查了是否有解决方案需要更新innerHTML PropertyTanks以获得答案！我最初将其更改为mouseenter2，因为我认为，如果有另一个同名事件，它可能无法工作。所以，是的，它不适用于mouseenter。我只是检查了需要更新innerHTML属性的解决方案。该指令位于p元素上。p元素是否具有值属性。不应该是innerText。您可以为ElementRef指定一个类型，以帮助查看元素上的属性。您可以登录到控制台以查看是否触发了事件。您还需要存储原始的innerText并在mouseleave上重置它。该指令位于p元素上。p元素是否具有值属性。不应该是innerText。您可以为ElementRef指定一个类型，以帮助查看元素上的属性。您可以登录到控制台以查看是否触发了事件。您还需要存储原始的innerText并在mouseleave上重置它。