如何在 Angular 的独立组件中使用指令

Question

我有一个指令，它不是独立的。 我正在尝试在独立组件中使用此指令。这样做时，我遇到了以下错误。

我已在组件的导入数组中包含指令，

问题是：我们可以在独立组件中使用非独立指令吗？

Answer 1

Mike 的评论提示我创建一个父模块并在需要的地方导入它。

我创建了 1 个父级 DirectiveModule，其中我在导出和声明数组中提到了PositiveIntegersDirective。

现在我已将 DirectiveModule 导入到我的独立组件中。它起作用了......！

Answer 2

您得到的错误有点奇怪，因为在尝试将非独立指令导入独立组件时我得到了不同的错误：

https://stackblitz.com/edit/angular-ivy-xsdtcl?file=src/app/test.component.ts

指令“TestDirective”出现在“imports”中，但不是独立的，不能直接导入。它必须通过 NgModule 导入。

...这基本上表明您要导入的指令本身必须是独立的，或者是必须导入的模块的一部分（因为仍必须声明非独立指令）。

Answer 3

制定指令

standalone

解决了错误。

@Directive({
    selector: '[appClickOutside]',
    standalone: true, // Make the directive standalone
})