Angular 6从API获取动态路由后无法正常导航的问题

你猜的完全正确！问题的核心就是从后端返回的路由对象里，component字段是字符串"MyTestComponent"，但Angular的Route接口要求的是组件类的引用，而不是字符串名称。Angular没法自动把字符串映射到对应的组件类，这就导致它找不到要加载的组件，哪怕你已经把组件加到entryComponents里也无济于事。

下面是具体的解决步骤和代码示例：

1. 创建组件名称与类的映射表 #

首先，我们需要手动建立组件字符串名称和组件类之间的对应关系，这样才能把后端返回的字符串转换成Angular能识别的组件引用。

// 导入你需要的所有动态组件
import { MyTestComponent } from './path/to/my-test.component';
// 你可以把这个映射表放在一个单独的文件（比如component-map.ts）里，方便后续维护
export const ComponentMap = {
  'MyTestComponent': MyTestComponent,
  // 后续新增的动态组件都在这里添加对应关系
};

2. 处理后端返回的路由数据 #

在获取到后端路由后，遍历每个路由项，把字符串形式的component替换成映射表中对应的组件类：

import { ComponentMap } from './component-map';
import { Route } from '@angular/router';

// ... 你的其他代码

this.rest.getRoutes('TestMePlease')
  .subscribe(routes => {
    const processedRoutes: Route[] = [];

    // 遍历后端返回的路由结构，处理每个路由项
    for (const routeKey in routes) {
      if (routes.hasOwnProperty(routeKey)) {
        routes[routeKey].forEach(rawRoute => {
          // 替换component字段：从字符串转为组件类
          const processedRoute: Route = {
            ...rawRoute,
            component: ComponentMap[rawRoute.component]
          };
          processedRoutes.push(processedRoute);
        });
      }
    }

    // 将处理后的路由添加到router配置中
    processedRoutes.forEach(route => {
      this.router.config.unshift(route);
    });

    this.router.resetConfig(this.router.config);
    this.router.navigateByUrl('test');
  });

关键注意事项 #

• 确保所有需要动态加载的组件都已在模块的declarations和entryComponents中声明（Angular 6仍然需要entryComponents，因为当时还没有Ivy编译器的自动处理）。
• 映射表需要和你的组件同步更新：每当新增一个需要动态加载的组件，都要在ComponentMap里添加对应的键值对。
• 如果你的场景涉及懒加载模块，只需要把映射表中的值换成loadChildren的字符串格式即可，逻辑类似。

这样处理后，Angular就能正确识别路由对应的组件，不会再出现需要添加entryComponents的错误了。

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