将段落内的字符串更改为大写的指令不起作用
Directive to change the string inside of a paragraph to uppercase is not working
我正在尝试编写一个指令,当您将鼠标悬停在段落上时,它会将段落的内容变为大写。我没有收到任何错误 - 它只是不起作用。我之前写过类似的代码,将文本突出显示为某种颜色,效果很好。为什么将文本更改为大写时它也不起作用?
filter.component.html
<p appToUpperCase>String to uppercase</p>
到上-case.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。
我正在尝试编写一个指令,当您将鼠标悬停在段落上时,它会将段落的内容变为大写。我没有收到任何错误 - 它只是不起作用。我之前写过类似的代码,将文本突出显示为某种颜色,效果很好。为什么将文本更改为大写时它也不起作用?
filter.component.html
<p appToUpperCase>String to uppercase</p>
到上-case.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。