路由中的子页面不显示Angular

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，任何更改。我在Component1和Component2中添加了<router-outlet></router-outlet>。

我也试过了，但我遇到了同样的问题

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

Answer 1

由于它被定义为 child，您的路线 URL 将类似于 partA/:id/partB/:id，而您正在尝试的是 this.router.navigate(["partA/partB" + item['name']], {state: {data: item}})，它属于 [=12] =] 不存在。

您的解决方案是修改路由或使用定义的格式调用 navigate。

Answer 2

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

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

路由中的子页面不显示Angular

Children in routing does not show the page Angular

routing

typescript

angular