你可能已经听说过动态组件了，它们非常有用，可以创建更加动态的应用程序。它们允许我们在运行时根据一些自定义逻辑动态加载组件，而不必创建一个充满了大量 ngIf 的组件。

如果你还没有听说过动态组件，我建议你观看 Angular Connect 上 Shmuela Jacobs 的这个演讲：

在我的日常工作中，我正在构建一个类似于 CRM 的系统，管理各种不同的产品，这些产品都有一个共同的核心部分，但也有一些产品特定的内容。为了使组件更加可重用，我引入了动态组件，这些组件根据指定当前活动产品的 InjectionToken 加载正确的产品特定组件。一切都很好，直到我尝试重构一个步骤流程，它具有一些公共步骤，但也有一些产品特定的步骤。这是一个问题，因为步骤流程不仅是基于组件的，还依赖于路由。这意味着一个产品的步骤流程可能会有一些额外的步骤（即路由），这些步骤与其他产品不同。步骤数量也可能会有所不同。

一个肮脏的解决方法是创建一个名为：step1、step2、step3 的固定数量的路由，然后在每个步骤中动态加载组件，但由于步骤数会变化，这是不可能的。正确的解决方案是使用动态路由。

通常，我们在路由模块中非常静态地定义模块的路由，例如：

一旦模块被加载，就没有任何逻辑可以干扰路由的静态分配，所以始终会有主页路由，没有其他内容。

示例

让我们看一个非常简化的例子，可能并没有那么多意义，但它的目的是演示动态路由的工作原理：

我们想创建一个具有以下路由的应用程序：

• 主页 (静态)
• 404 Not Found (静态)
• 白天 (动态；仅在上午 6 点至下午 6 点之间可用)
• 夜晚 (动态；仅在下午 6 点至上午 6 点之间可用)
• 秘密 (动态；50/50 的机会)

动态路由意味着模块的路由配置可以在每次加载时根据你定义的加载逻辑而变化。主要的技巧是使用ROUTES InjectionToken，它是路由器配置的低级 API。我们不是直接在 RouterModule 的 forRoot/forChild 函数中传递路由，而是传递一个空数组，并在提供程序部分提供 ROUTES 令牌。在这种情况下，Angular 路由器将自动使用提供的令牌中的路由。

现在我们在提供程序部分中定义了路由，我们可以利用useFactory提供程序定义对象。这样，我们就可以传递一个包含决定路由应该是什么样子的逻辑的工厂。

**简短提醒：**如果你在上午 5:59 加载了模块并等到了上午 6:01，那么白天的路线将不可用，因为路由配置已经完成。这意味着定义路由的逻辑仅在加载模块时执行一次。

完整的示例可以在我的 GitHub 上找到：

GitHub - HaasStefan/dynamic-routing-angular: example for dynamic routing in Angular

译自：https://levelup.gitconnected.com/angular-dynamic-routing-299c04ca75b1