Javascript angular2中多步骤表单的每个步骤的唯一url

所以我在我的网站上有一个

注册页面

，是用

Angular2 Typescript

构建的。这是一个单独的组件，包含注册的不同步骤/wiz步骤。下面看起来

我只是简单地使用

ng if/ng show/ng hide

方法继续下一步。但是所有这些步骤的url保持不变，如

http://mysite/signup

但我希望每个步骤都有一个唯一的url，比如，

http://mysite/signup/step1

，

http://mysite/signup/step2

，等等

---

在不对代码做太多更改的情况下，实现这一点的最佳方法是什么？

您可以利用子路由来实现这一点

建议: 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",
}

在你看来

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

谢谢你的回答。。但是

this.route.params.subscribe（（params:{step:string}）=>{this.currentStep=SignUpStepEnum[params.step]；}）似乎不起作用。它没有检测到/step1到/step2的更改我编辑了我的答案，将枚举定义为带有字符串的新类型。现在应该可以了。确保区分大小写。不，对不起，我的意思是，
this.route.params.subscribe（（params:{step:string}）=>{console.log（“hey got one！！”）}）
在此文本中，“hey got one！！”不会登录url从../step1更改为../step2route是一个
ActivatedRoute
实例吗？请给我们您的路线配置好吗？是的，路线是一个ActivatedRoute实例
<div [ngSwitch]="currentStep">
        <step1 *ngSwitchCase="SignUpStepEnum.STEP1"></step1>
        <step2 *ngSwitchCase="SignUpStepEnum.STEP2"></step2>
        <step3 *ngSwitchCase="SignUpStepEnum.STEP3"></step3>
</div>