背景
在使用 Angular 框架进行开发的过程中，我们经常会用到 RouterModule 模块来完成路由的配置。在配置项目的路由时，我们通常会使用 RouterModule.forRoot() 方法来加载路由信息，但是在使用 RouterModule.forRoot() 方法时，可能会发现在某些情况下页面会多次加载，这个问题给开发造成了很大的困扰。
问题分析
在路由模块中，forRoot() 方法是用于初始化路由的，这个方法会生成一个 RootRouterModule 实例来处理应用程序的路由。如果这个方法被多次调用，则会导致多个 RootRouterModule 实例被生成，从而导致路由模块的多次加载。
解决方案
解决这个问题的方法是在应用程序的 AppModule 中仅仅调用一次 RouterModule.forRoot() 方法，而不是在其它模块中多次调用这个方法。在应用程序内的其它模块中使用 forChild() 方法来加载子路由信息。
以下是一个示例代码片段，在这个代码片段中，我们在 AppModule 中使用 RouterModule.forRoot() 方法来加载主路由，而在 FeatureModule 中使用 RouterModule.forChild() 方法来加载子路由。
-- -------------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - ------------ - ---- ------------------
----- ---------- ------ - -
- ----- --- ---------- ------------ -
--
-----------
-------- -
-------------------------------
--
-------- --------------
--
------ ----- ---------------- --
-- -----------------
------ - -------- - ---- ----------------
------ - ------- ------------ - ---- ------------------
------ - ---------------- - ---- ----------------------
----- -------------- ------ - -
- ----- ---------- ---------- ---------------- -
--
-----------
-------- -
------------------------------------
--
-------- --------------
--
------ ----- -------------------- --
-- --------------------
------ - --------- - ---- ----------------
------------
--------- --------------
------------ ----------------
--
------ ----- ---------------- --使用上述方式来加载路由，可以有效地避免多次加载的问题，从而提高应用程序的性能。
结论
在使用 Angular 框架进行开发的过程中，由 RouterModule.forRoot() 方法引起的多次加载 Bug，是一个影响越来越大的问题，但是通过将 forRoot() 方法仅仅调用一次，而在其它模块中使用 forChild() 方法来加载子路由，可以有效地避免这个问题，从而提高应用程序的性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6718bcf5ad1e889fe22df377