angular - 如何在几个部分中制作表格，以便它们一个接一个

Question

我正在构建角度项目，并希望在几个部分中实现一个接一个的注册。注册需要大约 10 个字段，为了看起来不错，我想将输入字段分组。因此，当您输入第一组中的所有字段时，通过单击底部第一组“消失”和第二组出现的按钮，依此类推。当然，最后所有输入的数据都应该可用，以便可以检查并发送到数据库。

现在，我认为它可以用角度动画来完成，但这要求每个组都应该在它自己的组件中，还是我错了？我尝试过使用 ng-bootstrap 轮播，但无法使其工作。

任何新的建议和帮助将不胜感激。

标签： angularangular-formsangular-animations

Answer 1

你可以通过路由来做到这一点。

定义您希望注册信息出现的路由器插座。然后转到第一组问题。在点击路线到第二组问题。

使用路由，每组问题将是一个单独的组件。

我在这里做了类似的事情（但有标签）：https ://github.com/DeborahK/MovieHunter-routing

这是路由定义的示例：

  {
    path: ':id/edit',
    component: MovieEditComponent,
    children: [
      { path: '', redirectTo: 'info', pathMatch: 'full' },
      { path: 'info', component: MovieEditInfoComponent },
      { path: 'tags', component: MovieEditTagsComponent }
    ]
  }

在这里，我进入两个选项卡：信息和标签。但是您可以只使用表单（而不是选项卡）进行路由。