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

【问题标题】：How to Encalsulate Page Structure / Routes in Angular 4?如何在 Angular 4 中封装页面结构/路由？
【发布时间】：2017-08-29 14:19:56
【问题描述】：

我有一个常规的 Angular 4 应用程序，我使用 Router、ActivatedRoute.params.subscribe、[routerLink] 等在页面之间导航并解释 URL。

现在这导致了这样一个事实，即我有很多“魔术字符串”四处飞舞，因为许多不同的 .ts 文件中都有 url 片段。当然它有效，因为它们匹配，但对我来说似乎有点纠缠不清。这是一个随机的例子：

<a [routerLink]="['/foo']">Home</a> <a [routerLink]="['/foo/item', 1]">Item 1</a> <a [routerLink]="['/foo/item', 2]">Item 2</a>

我的一个想法是构建一个服务，为组件进行 url 构建，因此了解 url 结构。这只是我的一个想法，但我对角度的经验并不丰富，也许出于某种原因“魔术弦”是要走的路。

是否有最佳做法可以将 url 结构排除在组件之外？

【问题讨论】：

我会在组件中配置它们
@MaximKoretskyi，这至少可以从 html 模板中获取 url。谢谢你的想法！
不客气，那么您可以实现包含完整路线图的服务，并可以根据当前组件路线找出可能的路线，它采用当前路线service.get(currentRoute)和返回可能的路线列表，然后您可以在模板中使用它们

【解决方案1】：

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

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

对我来说，最好的事情是构建一个导航组件，该组件将使用单个路由器配置（这取决于您的需求）。这就是我要说的：https://github.com/akveo/ng2-admin/blob/master/src/app/pages/pages.menu.ts

【讨论】：