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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
[{
    "path": "routeName"
    "component": "MyComponent"
}]

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

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

EN

回答 2

Stack Overflow用户

回答已采纳

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

这是应用程序模块

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
  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 10:41:19

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@
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

复制
相关文章
Expected object of scalar type Float but got scalar type Double for argument
在pytorch中float32为float类型,而float64则为double类型,注意tensor的数据类型。
狼啸风云
2020/12/01
1.7K0
Expected object of scalar type Float but got scalar type Double for argument
<statement> or DELIMITER expected, got ‘id‘
一、idea mybatis错误信息 <statement> or DELIMITER expected, got ‘id’ PS:idea mybatis报错,很明显是idea配置错误,如图
全栈程序员站长
2022/11/17
3K0
<statement> or DELIMITER expected, got ‘id‘
laravel发送邮件时报Expected response code 250 but got code "530"....错误
**Expected response code 250 but got code "530"with message "530 5.7.1 Authentication required "** 首先看一下.env配置
友儿
2022/09/11
7490
TypeError: an integer is required (got type tuple)
没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图像。 没读到图
狼啸风云
2020/12/22
8120
TypeError: an integer is required (got type tuple)
Python OSError: [Errno 22] Invalid argument 错误解决
在爬取视频数据并保存到本地时报错:OSError: [Errno 22] Invalid argument
花猪
2022/02/16
1.5K0
ORA-00932: inconsistent datatypes: expected - got CLOB
      最近数据库从10.2.0.3升级到了10.2.0.5之后,一些对象无法编译通过。查看了这些对象主要表现在之前写法不严格的SQL语法导致了这些package无法成功编译,诸如select查询列中不能使用混淆的列名称等。另外一个比较表现突出的是返回ORA-00932: inconsistent datatypes: expected - got CLOB错误,即不一致的数据类型,获得CLOB数据类型。下面是这个问题的症状及对策。
Leshami
2018/08/13
2.4K0
vue常见错误:Invalid prop: type check failed for prop “data“. Expected Array, got Object
这个错误的意思是说:无效的命名数据:“数据”类型检查失败。期望数组,得到对象,那么我们这个时候很明白了,是类型不对,但是是哪一行的呢?打开错误信息下面的详情,这个时候找到后缀是自己页面的.vue文件,看看是哪一行,就知道问题在哪了!下面的是我的:
全栈程序员站长
2022/07/01
2.1K0
vue常见错误:Invalid prop: type check failed for prop “data“. Expected Array, got Object
TypeError: parse() got an unexpected keyword argument 'transport_encoding'
有点尴尬,自安装了ANACONDA和TensorFlow之后,首次在ANACONDA Prompt中用pip命令安装第三方库,然而 一大片刺眼的红字就扑面而来, 在ANACONDA Prompt中没
凌川江雪
2018/09/13
1.6K0
TypeError: parse() got an unexpected keyword argument 'transport_encoding'
keras报错:TypeError: softmax() got an unexpected keyword argument 'axis'
网上看到一种说法是由于tensorflow版本过低的问题,这里我的环境中tensorflow的版本是1.2.1,查看版本号的方法:终端命令查看TensorFlow版本号及路径。这种说法的解决方案当然就是升级tensorflow版本了。由于比较麻烦我没有选择这种方法。
Cloudox
2021/11/23
7720
keras报错:TypeError: softmax() got an unexpected keyword argument 'axis'
basic_consume() got multiple values for keyword argument 'queue'
今天在新的服务器上安装了一个pip install pika,然后连接mq的程序就报错了
周小董
2019/06/13
3.4K0
vue常见错误:Invalid prop: type check failed for prop "data". Expected Array, got Object
这个错误的意思是说:无效的命名数据:“数据”类型检查失败。期望数组,得到对象,那么我们这个时候很明白了,是类型不对,但是是哪一行的呢?打开错误信息下面的详情,这个时候找到后缀是自己页面的.vue文件,看看是哪一行,就知道问题在哪了!下面的是我的:
何处锦绣不灰堆
2020/05/29
34.7K0
vue常见错误:Invalid prop: type check failed for prop "data". Expected Array, got Object
[Python开发技巧]·解决Django render() got an unexpected keyword argument 'renderer'问题
当我们使用Django开发个人网站时,如果用到Ueditor,有时会遇到这个问题。
小宋是呢
2019/06/27
2.1K0
[Python开发技巧]·解决Django render() got an unexpected keyword argument 'renderer'问题
model_utils _clone() got an unexpected keyword argument 'subclasses'
发生环境 从 Django 1.11 迁移到 Django 2.2 错误日志 django.request: 2020-05-22 16:12:18,196 E:\py_virtualenv\joyoo\lib\site-packages\django\utils\log.py [line:228] ERROR Internal Server Error: /friendUrlAdd/ Traceback (most recent call last): File "E:\py_virtualenv\j
卓越笔记
2023/02/18
2180
django2.2 TypeError: render() got an unexpected keyword argument 'renderer'
从Django 1.11 迁移到 Django 2.2 后 AdminFileWidget 的 render 报错了:
卓越笔记
2023/02/18
4970
pd.MultiIndex() TypeError: __new__() got an unexpected keyword argument 'labels
可以看到pd.MultiIndex()并没有labels参数,与labels功能相同的是codes参数,查看https://pandas.pydata.org/pandas-docs/stable/user_guide/advanced.html可以看到:
迷乐
2021/02/17
2.3K0
django_filters TypeError: __init__() got an unexpected keyword argument 'name'
django-filter 参数名字已经由 name 更改为 field_name
卓越笔记
2023/02/18
5260
mv argument list too long错误
家中领导负责的一个系统,在清理过期文件的时候,提示了个错误,是时候展示真正的技术了,
bisal
2020/02/21
2.3K0
mv argument list too long错误
[已解决]报错:ValueError: Expected 2D array, got scalar array instead
值错误:应为二维数组,而得到的是一维数组: 使用array重新调整数据的形状。如果数据有单个功能或数组,则重新调整形状(-1,1)。如果数据包含单个示例,则重新调整形状(1,-1)。
hankleo
2020/09/17
2.4K0
mybatis映射xml配置文件报错:<statement> or DELIMITER expected, got ‘id‘
编写mybatis生成的xml文件时,发现sql节点内报错。 这是IDEA的bug,发生在MyBatis的Mapper的XML文件的sql节点上,第一个字段是什么错误中最后一个单引号内部就是什么。
JavaEdge
2021/02/23
4.3K1
mybatis映射xml配置文件报错:<statement> or DELIMITER expected, got ‘id‘
Celery ValueError: not enough values to unpack (expected 3, got 0) 的解决方法(windows)
网上检索到资料 https://github.com/celery/celery/issues/4081
卓越笔记
2023/02/18
1.1K0

相似问题

按升序和降序对链表进行排序

20

按降序对向量进行排序

107

按降序(反向)对TreeMultimap进行排序

29

如何按降序对值进行排序

20

按几列对numpy进行降序排序

14
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文