angular2中多步形式的每个步骤的唯一URL

Question

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

我只是使用ng-if/ng-show/ng-hide方法继续下一步。但所有这些步骤的网址与http://mysite/signup保持一致。

但我想为每个步骤提供一个独特的网址，例如， 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），您可以将其与对象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>