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

【问题标题】：Angular 9 - My custom directive isn't working as supposedAngular 9 - 我的自定义指令没有按预期工作
【发布时间】：2021-02-15 22:21:55
【问题描述】：

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

我有一个类似于这个的自定义指令：

（出于法律原因，我无法显示我的实际指令，但使用此示例也不起作用 // 此指令属于以下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。有什么想法吗？？

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

【问题讨论】：

它在这个 Stackblitz 中工作：stackblitz.com/edit/angular-ivy-ulcst1?file=src/app/…
我的指令在另一个文件夹中。您认为我必须在模块中进行额外配置才能使其正常工作吗？
如果 app.modules 中存在导入错误，您将无法编译应用程序。我已将指令移到 Stackblitz 的文件夹中。

标签： angular typescript angular-directive

【解决方案1】：

找到了解决办法。

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

但不会将其添加到导出中。添加它可以解决我的错误。

【讨论】：