Question

我对角度相当新，我正在使用角度4构建多步形式。目前组件结构如下：

-apply.component
--step-one.component
--step-two.component
--step-three.component

路由器设置如下：

{
 path: '',
 redirectTo: '/apply',
 pathMatch: 'full'
},
{
 path: 'apply',
 component: ApplyComponent,
 children: [
   {
     path: 'personalInfo',
     component: StepOneComponent,
     outlet: 'step1'
   },
   {
      path: 'employmentInfo',
      component: StepTwoComponent,
      outlet: 'step2'
   }

ApplyComponent中的路由器出口：

 <router-outlet name="step1">Child 1 in apply comp</router-outlet>
 <router-outlet name="step2">Child 2 in apply comp</router-outlet>

当使用完成一个部分时，它应隐藏，如下一节所示。每个部分都是父组件上的路由器插座。

我正在试图找出协调每个部分的显示/隐藏的最佳方法。我已经想出如何激活前一条路线的每条路线，但我该如何隐藏或破坏以前的路线（路段）？每个部分是否应该实际生成？我如何协调所有不同部分的交互（返回/编辑/下一步）？

编辑：另一个想法，是否应该在父级中定义所有组件，然后只显示/隐藏为移动到下一步然后更新路由？在我当前的路由器更新组件实现中，我可能会考虑这种情况而不是组件更新路由。

Answer 1

我建议使用单个路由器插座来显示步骤。从路由配置中删除指定的路由器插座，并从路由器插座标记中删除该名称。我假设您已经有下一个和上一个按钮在步骤之间移动。现在您不必担心显示/隐藏逻辑，路由器会为您处理。您可能需要添加Route Guards以防止用户篡改网址。

您的路由器配置如下所示：

{
 path: 'apply',
 component: ApplyComponent,
 children: [
   {
     path: 'personalInfo',
     component: StepOneComponent
   },
   {
      path: 'employmentInfo',
      component: StepTwoComponent,
   }
}

您的单个路由器插座如下所示：

<router-outlet>Steps will be loaded here</router-outlet>

角度多步形式路由

1 个答案: