【问题标题】:Angular 2+ Routing -- Routing based on user inputAngular 2+ Routing -- 基于用户输入的路由
【发布时间】:2018-02-20 18:04:19
【问题描述】:

目前在我们的项目中,我们正在使用 Angular 的路由器来定义我们的路由。我们有一个向导式的单页应用程序,每个页面上都有下一个和上一个按钮,分别定义要转到下一个和上一个的路由。这些下一个和上一个按钮是在每个页面上根据前一页的用户输入使用条件逻辑实现的(例如,如果用户从前一页选择“选项 1 和选择 1”,则转到第 X 页,否则转到第 Y 页)。这在大多数情况下都有效;但是,随着我们添加更多需要更多条件逻辑的页面,这可能会失控。

有没有办法简化这个过程?我研究了 Angular 路由器守卫,虽然它们提供了一种将用户重定向到某个页面的方法,如果应用程序在调用路由时没有必要的数据,我认为它们不是我们的样子正在寻找。

【问题讨论】:

  • 正则表达式怎么样? stackoverflow.com/questions/18131834/…
  • 听起来问题不在于寻呼机、条件或路由器,而是设计本身。
  • 对不起,我在上面添加了一点说明——我想根据上一页的答案转到某个页面。

标签: angular angular-routing angular-router angular-router-guards


【解决方案1】:

如果用户不打算直接访问向导的第 2 页以上,则没有理由使用路由器 imo。我会选择一个主要组件/路由,一种自定义树数据结构,它定义了其中的用户流程,例如每个步骤中使用的模型、组件、动态表单、编辑器、api 端点等。如果简单 ng-switches 的情况太多,请在 ComponentFactories 中折腾:https://angular.io/guide/dynamic-component-loader

即。我尽量避免使用 Step1Component 等,并拥有可重用的组件,这些组件允许使用基本上仅由 json 构建的不同类型的 UI。虽然在较小的情况下 step1、step2 等 - 组件也很好。

【讨论】:

猜你喜欢
  • 2021-05-26
  • 1970-01-01
  • 2017-08-10
  • 1970-01-01
  • 2017-07-07
  • 1970-01-01
  • 2017-01-06
  • 1970-01-01
  • 2017-12-05
相关资源
最近更新 更多