Question

我正在Angular 8中使用路由。我正在尝试在路由器中制作路由器，这意味着要使用子代。第一个路由有效，但是第二个路由获取正确的url，但是页面没有改变。

    const routes: Routes = [
      {
        path: "", 
        component: Component
      },
{
        path: "things", 
        component: Component1
      },
      {
        path: "partA/:id",
        component: Component2,
        children: [
          {
              path: 'partB/:id',
              component: Component3
          }]


        }
        ];

    @NgModule({
      imports: [RouterModule.forRoot(routes), RouterModule.forChild(routes)],
      exports: [RouterModule]
    })

在Component1.ts中（有效）

this.router.navigate(["partA" + item['name']], {state: {data: item}})

在Component2.ts中：

 this.router.navigate(["partA/partB" + item['name']], {state: {data: item}})

在那种情况下，浏览器中的url很好，我没有收到任何错误，但是页面仍然是Component2，没有任何更改。我在组件1和组件2中添加了<router-outlet></router-outlet>。

我也尝试过这个，但是我遇到了同样的问题

{
     path: "house/character/:id",
     component: InfoCharacterComponent
   },

Answer 1

由于已将其定义为子级，因此您的路由URL类似于@prefix skos: <http://www.w3.org/2004/02/skos/core#> . @base <http://transport.data.gov.uk/def/vehicle-category/>. <motor-vehicle> a skos:Concept ; skos:prefLabel "Motor Vehicle"@en ; skos:topConceptOf <> ; skos:narrower <motorbike> ; skos:narrower <car> ; skos:narrower <bus> ; skos:narrower <van> ; skos:narrower <HGV> .，而您尝试的是partA/:id/partB/:id，而该this.router.navigate(["partA/partB" + item['name']], {state: {data: item}})则不存在。

您的解决方案是修改路由或使用定义的格式调用partA/partB/:id。

Answer 2

如果partA:id中有partB可用，则可以按以下方式使用它。这将适用于您的路线示例。

this.router.navigate(["partA/" + partAid + "/partB" + item['name']], {state: {data: item}})

路由中的子级不显示“角度”页面

2 个答案: