javascript - angular2中多步表单每一步的唯一url

Question

因此，我的网站中有一个注册页面，它是使用Angular2-Typescript 构建的。这是一个包含不同注册步骤/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 是一个路径变量(Param)，您可以将其对应于 typescript 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>