路由中的子级不显示页面 Angular答案

【问题标题】：Children in routing does not show the page Angular路由中的子级不显示页面 Angular
【发布时间】：2019-12-22 23:48:54
【问题描述】：

我正在使用 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
   },

【问题讨论】：

标签： angular typescript routing

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：