Angular 延迟加载的同名模块组件答案

【问题标题】：Angular lazy loaded module components with the same nameAngular 延迟加载的同名模块组件
【发布时间】：2020-10-16 12:10:03
【问题描述】：

我有一个带有多个延迟加载模块的 Agular 应用程序。这些模块每个都包含一些不同的组件，这些组件在逻辑上相似但内容不同。例如。每个模块都可能有自己的“home”组件。

可以将这些组件命名完全相同吗？

对我来说，在每个模块名称前加上前缀似乎过于冗长。特别是当名称开始变长时，考虑到我想在简洁和可读性之间保持平衡。

从功能上看，这似乎不是问题。以以下应用为例。它有 2 个延迟加载的模块，每个模块包含 2 个与另一个模块中的组件同名的组件。一个组件通过模块的路由加载，另一个通过第一个组件的模板中的选择器加载。

我知道这个问题可能被认为是基于意见的，但是否有任何技术原因不应该这样做？（如果有人想私信我，我也对意见感兴趣）

【问题讨论】：

【解决方案1】：

技术上没有问题，您可以使用相同的名称。就像我有很多模块都将仪表板作为每个模块的组件。只要正确导入就可以了。

但对于较大的应用程序，有时在自动导入时它可以导入指向不同的 1，然后是所需的那个。这发生在我身上一次，我有两个不同的 add 和 list 组件，所以在自动导入 url 时指向错误的那个。

所以为了清楚起见，如果你保留不同的名称，比如在它前面加上一些东西，这样你就知道它是用于这个模块的等等，否则我们不能说它是或不是“好或坏的做法”。

【讨论】：

【解决方案2】：

你可以在 tsconfig.json 路径中使用导入别名

"paths": {
    "@modules": "app/test-mod(?:\.\d+)?"
},

您可以使用正则表达式来匹配文件结束名，这样如果您有多个文件夹，您可以在导入时将它们命名为 file1、file2、file3 和儿子，以匹配它们

import('@modules/innerfolder/mymodule.ts')

【讨论】：

【解决方案3】：

我一直在处理一个项目，其中包含 5 个延迟加载模块，它们的子文件夹中有数百万个具有相同组件名称的组件。

我在开发过程中面临的充分理由或问题是在导入组件时，自动导入有时会从不同的模块导入组件，这样我一直面临着困惑，并且在一段时间内完成了错误的开发组件。

但这已经发生了 2 次，然后我在导入组件时非常安全

【讨论】：