Question

我发现必须在根模块（AppModule）中手动注册Angular MVC组件和服务有点不方便。在团队中工作时变得更加不便。理想情况下，开发人员应该只添加三个文件-组件，视图和服务，而无需触摸任何其他“基础结构”文件。

我试图不在providers数组中注册我的服务，但是这些服务仍然可以正常工作。但是，我不确定不把它们放在那会带来什么长期后果。在哪种情况下，我希望将服务放在providers数组中？
然后，我尝试不将组件注册到declarations数组中，当然，Angular失败，并显示一条消息“ Component BanksComponent不属于任何NgModule或模块”。这似乎是“约定过度配置”想法的障碍。
能够在组件代码文件中添加特定于组件的路由，并以某种方式使Angular Router自动从已定义路由的所有组件中收集那些路由（类似于ASP.NET MVC Route属性的方式），将是很棒的。在控制器上工作）。有什么解决办法吗？

我应该完全放弃这个想法，接受Angular无法那样工作的事实吗？

Answer 1

您可以将Angular组件放置在不同的模块中。这样的好处是，您可以更好地管理依赖关系，并且开发人员不必接触相同的文件。

我在所有项目中使用的文件夹结构：

core/
- login/
- auth/
- core.module.ts // Register the root routes here (RouterModule.forRoot)
- core.route.ts // Your lazy loaded routes for the core modules (login for example)

feature/
- home/
-- home.component.html
-- home.component.scss
-- home.component.ts
-- home.module.ts // Register the component and module route here (RouterModule.forChild)
- feature.module.ts // Register the feature routes here (RouterModule.forChild)
- feature.route.ts // Your lazy loaded routes for the feature modules (Example: The home page)

shared/ // Put any components/pipes/services that are shared over multiple components here
-- shared.module.ts // You can put dependencies that you share across multiple modules here (Example: Angular material imports)

app.module.ts
app.component.ts

此结构将身份验证，页面和共享功能的逻辑分开。它还捆绑了一个组件/小模块，以便可以独立开发并可以轻松更换。

示例

您可以找到一个有关它如何适合实际应用in this stackblitz的示例。

回答您的问题

自Angular 6开始，您可以使用@Injectable({providedIn: root})语法注册服务。这意味着您的服务将在全球范围内可用（您无需先将其添加到providers数组中即可使用），并且会自动从产品包中删除（通过摇树）没有注入任何地方。
组件应始终在declarations数组中注册。但是您可以在声明组件的地方制作小模块。
通过RouterModule.forChild()可以创建特定于组件的路由。将其与延迟加载相结合，您可以更好地了解功能并获得更好的整体性能。

延迟加载

您可以使用延迟加载的路由来提高应用程序的速度和去耦。这是因为惰性路由（loadChildren数组中的routes）仅指向路径。这样，您可以用其他模块（具有相同的名称）替换该模块，而无需更改引用（我们需要更改的文件甚至更少！：D）。

示例导入：

{
  path: HOME_MODULE_ROUTE,
  loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
  // Add auth guard here to only show the page when the user is logged in
},

要进一步提高应用程序的性能，可以使用PreloadingStrategy。我建议使用PreloadAllModules策略，以便在不干扰用户的情况下加载您的模块，并加快应用程序的进一步加载和导航（more here）。

在字符串上使用常量

为了避免在删除路由时出现很多调试和/或运行时问题，我建议使用常量。这样，您就可以在1个地方定义页面路由，并且可以避免字符串比较。请注意，您需要一个单独的文件。您不能在路由文件中添加路由，因为那样会形成循环依赖。

如何实现Angular的配置约定？

1 个答案: