首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在angular中动态组合路由?

如何在angular中动态组合路由?
EN

Stack Overflow用户
提问于 2019-02-12 18:07:59
回答 2查看 2.9K关注 0票数 2

假设我有一个服务,它获取一个json格式的路径数组,如下所示:

代码语言:javascript
运行
复制
[{
    "path": "routeName"
    "component": "MyComponent"
}]

"MyComponent“是作为字符串检索的。现在,我希望将此数组转换为路由模块的路由。如何将"MyComponent“转换为类MyComponent?

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

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-02-12 19:24:40

这是应用程序模块

代码语言:javascript
运行
复制
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,如下所示:

代码语言:javascript
运行
复制
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文件中

代码语言:javascript
运行
复制
  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);
    });
票数 4
EN

Stack Overflow用户

发布于 2019-02-12 18:41:19

步骤1:将路由器注入app模块

步骤2:您可以随心所欲地更改router.config

代码语言:javascript
运行
复制
@
NgModule({
declarations: [
  HomeComponent
  ...
],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent },
        { path: '**', redirectTo: 'home' }
    ])
],
providers: []})


export class AppModule {
constructor(router: Router) {
    router.config.unshift({ path: 'new_path', component: NewComponent });
}}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54647534

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档