Angular 9 - 我的自定义指令没有按预期工作

Question

在您将此问题标记为重复之前。我曾尝试搜索周围的其他解决方案，但一切都对我有用。

我有一个与此类似的自定义指令：

（出于法律原因，我无法展示我的实际指令，但是这个示例也不起作用 // 该指令如下 tutorial）

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

@Directive({
  selector: '[exampleDirective]',
})
export class ExampleDirective {
  constructor(private elementRef: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
      console.log('Enter')
  }

  @HostListener('mouseleave') onMouseLeave() {
      console.log('Leave')
  }
}

我用 Angular CLI 生成了这个指令，所以自动添加到 modules.ts

然后在模板中 HTML 我有以下内容：

<div style="width: 100%;" exampleDirective> Come over me! </div>

其中exampleDirective是我们在自定义指令中设置的选择器。

情况是该指令不起作用，没有通过控制台打印消息，因此似乎没有将该指令应用于我的 div。有什么想法吗？？

[控制台未显示任何错误/编译 angular/构建应用程序]

Answer 1

找到解决方案。

问题是 CLI 在模块的声明中添加了导入。

但不将其添加到导出中。在那里添加它解决了我的错误。

Angular 9 - 我的自定义指令没有按预期工作

Angular 9 - My custom directive isn't working as supposed

typescript

angular-directive

angular