Question

我已经定义了子组件路由。

我无法从routerLink导航到默认路由。
父路径具有'：id'，因此对于子级路由，它仅使用前缀'：id'。

路线

{
    path: ':id', component: InterviewComponent,
    children: [                          
      {
        path: '',
        component: InterviewQuestionsComponent
      },
      {
        path: ':id/interview',
        component: InterviewGridComponent
      }
    ]

  }

锚标签

<ul class="list-unstyled components">
      <li>
        <a routerLink=""><i class='interviewQuestions'></i>&nbsp; <span style="cursor: pointer;">Interview Questions</span></a>
      </li>
      <li>
        <a routerLink=":id/interview"><i class='interviews'></i>&nbsp; <span style="cursor: pointer;">Interviews</span></a>
      </li>
    </ul>

<router-outlet></router-outlet>

我无法使用'routerLink =“”'导航到默认路由器
仅适用于“路径：'：id / interview'”的路由

Answer 1

我在这里观察到了几件事，

如果我对您的理解正确，那么

/ 1 应该呈现 InterviewQuestionsComponent

/ 1 /采访应呈现 InterviewGridComponent

对吗？如果我错了，请纠正我。

如果这是您想要的，请在下面修改您的路线，

{
path: ':id', component: InterviewComponent,
children: [                          
  {
    path: '',
    component: InterviewQuestionsComponent
  },
  {
    path: 'interview',
    component: InterviewGridComponent
  }
]
}

要导航到每个组件，您将需要'id'，这是路径参数，因此您在routerLink中所做的操作是不正确的。

按如下所示对其进行修改，

<ul class="list-unstyled components">
  <li>
    <a routerLink="1"><i class='interviewQuestions'></i>&nbsp; <span style="cursor: pointer;">Interview Questions</span></a>
  </li>
  <li>
    <a routerLink="1/interview"><i class='interviews'></i>&nbsp; <span style="cursor: pointer;">Interviews</span></a>
  </li>
</ul>

这里我在路径中硬编码为“ 1”，您可以使用Angular绑定使其动态。这是一个关于stackblitz的有效示例。

https://stackblitz.com/edit/angular-wipkyq

角组件布线中的挑战

1 个答案: