如何解决 Angular 中 “Can't bind to 'ngClass' since it isn't a known property of 'div'” 错误
在开发 Angular 应用过程中，经常会遇到错误提示：“Can't bind to 'ngClass' since it isn't a known property of 'div'”。它表示在某个组件中使用了 ngClass 指令，但是却无法识别这个指令。本文将详细介绍如何识别、分析并解决这个常见的错误。
I. 指令未引入
这个错误提示在 Angular 中经常出现，很多时候它意味着 ngClass 指令未引入。我们可以通过两种方式引入：
- 在组件级别上引入
我们可以在组件的 .ts 文件中引入 CommonModule，从而解决这个问题。示例代码如下：
------ - ------------ - ---- ------------------ --------- -------- --------------- --- --
- 在应用级别上引入
除了在组件级别上引入 CommonModule，我们还可以在应用级别上引入。在 app.module.ts 文件中导入 CommonModule 模块，然后在 imports 中添加它。示例代码如下：
------ - ------------ - ---- ------------------ ----------- ------------- ------ -------- --------------- ---------- ------ ---------- ----- --
如果你已经做了以上两种修改，但还是无法解决问题，接下来需要深入分析。
II. 指令存在于其他模块中
如果你在使用指令时遇到了这个错误，同时也确认了指令已经引入，那么有可能这个指令不在当前模块内。这种情况下，你需要将指令所在的模块导入到你的组件中。
在这种情况下，我们需要先找到实现这个功能的模块，首先打开文档，查找 ngClass 有哪些依赖性。为了查找依赖性，我们需要在 Angular 官网的 API 文档中搜索 ngClass。我们还可以在 TypeScript 定义文件中查找它，如果运行时有任何问题，我们可以使用 ng build --prod --aot。在这个过程中，类型检查器会检查每个文件并找出任何引用错误。
在找到依赖性后，我们需要在当前组件使用 ngClass 的模块中导入这个模块。示例代码如下：
------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- -- --------- ------- -- ----------- ------------- --------------- -------- --------------- ------------- ------------ ------------- -- --------- ---------- --- ---------- -------------- -- ------ ----- --------- --
III. 总结
在 Angular 开发过程中，遇到 “Can't bind to 'ngClass' since it isn't a known property of 'div'” 错误时，首先需要确认你已经按照前两种方法中的一种引入了 ngClass。如果还是无法解决问题，就需要深入分析并找出 ngClass 所在的模块，然后导入这个模块。只有这样，这个错误才会真正得到解决。
希望这篇文章能够帮助你解决类似的问题。如果您还有其他问题，请在评论区留言，我们将尽力为您解答。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64fda6f495b1f8cacdced9a6