如何在Angular 4中封装页面结构/路由？

Question

我有一个普通的Angular 4应用程序，我使用Router、ActivatedRoute.params.subscribe、[routerLink]等来在页面之间导航和解释URL。现在这导致了一个事实，许多不同的.ts文件中都有url片段，因此我有很多"神奇字符串"飞来飞去。当然它能工作，因为它们匹配，但对我来说似乎有点纠缠不清。这里是一个随机的例子：

``` Home Item 1 Item 2 ```

我想到的一个想法是构建一个服务，为组件构建URL并因此了解URL结构。这只是我想到的一个想法，但我在Angular方面经验不够，也许"神奇字符串"出于某种原因是可行的。是否有最佳实践来使URL结构不进入组件？

- clemens

---

我会在组件中进行配置。 - Max Koretskyi

@MaximKoretskyi，这至少可以将URL从HTML模板中提取出来。感谢您的建议！ - clemens

不客气，然后您可以实现持有完整路由地图的服务，并根据当前组件路由找出可能的路由。它会获取当前路由 service.get(currentRoute) 并返回可能路线的列表，然后您可以在模板中使用它们。 - Max Koretskyi

Answer 1

这就是为什么我一直在使用组件中的路由依赖并手动导航到每个目的地。当然，如果路由发生变化，我需要更改一些字符串，但我可以接受这样做。

为此，我还创建了一个导航组件，用于显示应用程序的路由。我甚至尝试使用大量元数据和权限管理动态构建我的应用程序路由，但最终破坏了我的懒加载功能，所以我不建议这样做。

对我来说，最好的方法是构建一个导航组件，它将消耗单个路由器配置（这取决于您的需求）。 这就是我所说的：https://github.com/akveo/ng2-admin/blob/master/src/app/pages/pages.menu.ts 演示应用程序：https://github.com/akveo/ng2-admin

- Alex Beugnet

---

是的，那也是一个有趣的想法。 - Max Koretskyi