时间戳

首页 > 解决方案 > 路由器子组件未绑定

typescript - 路由器子组件未绑定

问题描述

我的路由器设置：

{
    path: "",
    component: DynamicContentComponent
  },
  { 
    path: ":ctype/:termid",   
    component: DynamicContentComponent,
    children: [    
      {

        path: "description/:nodeId" ,component: DescriptionContentComponent
      }
    ]
  }

];

我的链接与路由器（http://localhost:4200/restaurants/3025/description/2266）浏览器的地址栏匹配，但组件（即）DescriptionContentComponent未加载，加载时重定向到DynamicContentComponent

这里，

:ctype --> 餐厅
:termid --> 3025
:nodeId --> 2266

标签： typescriptangular-ui-routerangular6

解决方案

将您的路线更新到此

{ 
    path: ":ctype/:termid",   
    component: DynamicContentComponent,
    children: [    
       {
         path: "description/:nodeId" ,component: DescriptionContentComponent
       }
     ]
},
{
    path: "",
    component: DynamicContentComponent
}

配置中路由的顺序很重要，这是设计使然。路由器在匹配路由时使用先匹配获胜策略，因此更具体的路由应该放在不太具体的路由之上。在上面的配置中，首先列出了具有静态路径的路由，然后是与默认路由匹配的空路径路由。通配符路由位于最后，因为它匹配每个 URL，并且只有在没有其他路由首先匹配时才应选择。

在这里阅读更多：角度路由

推荐阅读