Angular 5动态路由已添加但无法跳转问题求助

我懂你遇到的困扰了——明明已经把新路由加到routes数组里，控制台也打印出数组确实更新了，但点击链接就是跳不动，还报路由匹配错误。这其实是因为你误解了Angular路由配置的生效逻辑。

问题根源 #

当你在RouterModule.forRoot(routes)中传入初始路由数组时，Angular的Router服务会在初始化阶段就把这个数组的内容复制一份作为内部配置。之后你直接修改routes变量指向的数组，并不会同步到Router已经加载好的内部配置里。简单说：你改的是自己手里的副本，路由器用的还是原来那份初始配置。

解决方案：让Router重新加载配置 #

要让新路由生效，你需要主动通知Router更新它的内部配置，用Router.resetConfig()方法就可以做到。修改你的AppRoutingModule代码如下：

import { NgModule } from '@angular/core';
import { Routes, RouterModule, Router} from '@angular/router';
import { OneComponent } from './one/one.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
  constructor(router: Router) {
    console.log('Original Routes: ', JSON.stringify(routes, undefined, 1));
    // 添加新路由到数组
    routes.push({path: 'new/random/path', component: OneComponent});
    // 关键：让Router重新加载更新后的路由配置
    router.resetConfig(routes);
    // 验证更新后的配置
    console.log('Updated Router Config: ', JSON.stringify(router.config, undefined, 1));
  }
}

额外说明 #

• 不需要在构造函数里注入RouterModule，你只需要Router实例就够了。
• 如果是在应用运行过程中（比如用户操作后）动态添加路由，同样可以用resetConfig()方法，传入更新后的路由数组即可。
• 如果你不想修改原有的routes数组，也可以直接基于原配置创建新数组再传入：

  const updatedRoutes = [...routes, {path: 'new/random/path', component: OneComponent}];
  router.resetConfig(updatedRoutes);
  

这样修改后，点击Dynamic链接应该就能正常跳转到OneComponent了。

内容的提问来源于stack exchange，提问作者user9128680