angular - 如何以 Angular 动态组成路线？

Question

假设我有一个服务可以像这样获取一个 json 格式的路径数组:

[{
    "path": "routeName"
    "component": "MyComponent"
}]

“MyComponent”当然是作为字符串检索的。现在我想将此数组转换为路由模块的路由。如何将“MyComponent”转换为 MyComponent 类？

这样做的目的是让我的前端不知道它是什么。要添加新的路由和组件，我只需要向服务器上的文件添加一个新条目，并使其与我在 Angular 应用程序中创建的组件名称相匹配。

Answer 1

这是应用程序模块

export const routes: Route[] = [

];
@NgModule({
  declarations: [
    AppComponent,
    ErrorHandleComponent,
    FilterComponent,
    CreateComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    // AppRoutingModule,
    HttpClientModule
  ],
  entryComponents: [
    CreateComponent,
    FilterComponent,
    ErrorHandleComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在确保您拥有键值对 obj，它返回组件对键，例如:

import { CreateComponent } from '../create/create.component';
import { FilterComponent } from '../filter/filter.component';
import { ErrorHandleComponent } from '../error-handle/error-handle.component';

export const components = {
    'CreateComponent': CreateComponent,
    'FilterComponent': FilterComponent,
    'ErrorHandleComponent': ErrorHandleComponent,
};

然后把这段代码放到app.component.ts文件中

  constructor(private api: ApiService, private router: Router) {

  }
  getRoute() {
    this.api.get_route().subscribe(res => {
      res.forEach(element => {
         // components key value pair obj
         element.component = components[element.component]; 
        routes.push(element);
      });
      this.rlist = routes;
      this.router.resetConfig(routes);
    });