如何在 Angular 的非独立组件中使用独立的自定义指令？

Question

在非独立组件中使用独立自定义指令

我创建了一个自定义结构指令，我希望能够在不同的组件中重用它。 当它不是独立的时候，一切都工作正常，但是当我添加

standalone: true

时，它给了我一个错误：“导入”仅在独立的组件上有效。 我不想让我的组件也独立，只想让指令独立。

有办法实现吗？

Answer 1

如果您有一个非独立组件，并且当您想在其上使用独立自定义指令时，您必须将指令导入到模块文件中，即

app.module.ts

。

记住仅导入，而不是声明独立的自定义指令。

imports

装饰器中的

@Component

属性仅适用于standalone组件。如果您的组件不是独立的，并且您尝试向

imports

属性添加某些内容，则会抛出错误。

Answer 2

您可以像导入模块一样将独立指令导入到模块中：https://angular.io/guide/standalone-components#using-standalone-components-in-ngmodule-based-applications