angular2中多步形式的每一步唯一url

Question

所以我在用 Angular2-Typescript 构建的网站中有一个 SignUp Page。这是包含不同 steps/wiz-steps 注册的单个组件。看起来像下面，

我只是利用 ng-if/ng-show/ng-hide 方法继续下一步。但是所有这些步骤的 url 与 http://mysite/signup 一样。

但我希望每个步骤都有一个独特的 url，比如， http://mysite/signup/step1、http://mysite/signup/step2 等..

在不对代码做太多更改的情况下实现此目标的最佳方法是什么？

Answer 1

您可以利用子路由来执行此操作。

建议：

1- 在您的路由配置中，如下定义注册路由：

 {
    path: 'signup',
    children: [
      { 
        path: '',
        redirectTo: '/step1',
        pathMatch: 'full'
      }, 
      {
        path: ':step',
        component: SignUpComponent
      }
    ]
  },

其中 :step 是一个路径变量（参数），您可以将其对应于打字稿 Enum。

export type SignUpStepEnum = "step1" | "step2" | "step3";

export const SignUpStepEnum {
   STEP1: <SignUpStepEnum>"step1",
   STEP2: <SignUpStepEnum>"step2",,
   STEP3: <SignUpStepEnum>"step3",
}

并且在您的 SignUpComponent 中，订阅参数并使用 ngSwitch.

根据枚举值显示步骤

示例：

currentStep: SignUpStepEnum;

this.route.params.subscribe((params: { step: string }) => {
 this.currentStep = SignUpStepEnum[params.step];

if(!this.currentStep) {
//handle error when user is entering an incorrect step.
}

在您看来，

<div [ngSwitch]="currentStep">
        <step1 *ngSwitchCase="SignUpStepEnum.STEP1"></step1>
        <step2 *ngSwitchCase="SignUpStepEnum.STEP2"></step2>
        <step3 *ngSwitchCase="SignUpStepEnum.STEP3"></step3>
</div>

angular2中多步形式的每一步唯一url

Unique url for each step of multi-step form in angular2

javascript

router

typescript

angular

建议：