如何在Angular 2中正确配置高级路由

我是新手。我有一个包含表单步骤的项目创建页面。 第一步创建项目，然后在其他步骤中，我只更新每个步骤的相关信息。正如我想象的，这条路线应该是这样的：

project/form              // for creating new project
project/form/:id          // for updating a project
project/form/:id/step2    // for updating second step
projectform/:id/step3     // .........

以前的所有路线都共享相同的主组件。我的组件如下所示，主要组件加载在routerOutlet中，其中包含步骤组件：

这条路线是：

@RouteConfig([
    {path: '/project/form', name: 'Project_Form', component: ProjectFormComponent, useAsDefault: false},
    //new AuxRoute({path: '/:id', component: ProjectFormComponent}),
])

---

我可以指定应该从路由显示哪个步骤，或者我必须将步骤名称设置为参数，以便在主组件中在它们之间切换。对于这种情况，有什么建议吗？我做得是否正确？

您可以将步骤作为附加参数传递

@RouteConfig([
    {path: '/project/form', name: 'Project_Form', component: ProjectFormComponent, useAsDefault: true},
    {path: '/project/form/:id', name: 'Project_Form', component: ProjectFormComponent},
    {path: '/project/form/:id/:step', name: 'Project_Form', component: ProjectFormComponent},
])

您的

ProjectFormComponent

应该如下所示

import {RouteParams} from "angular2/router";

@Component({
   ...
   template: `
   <step-1 *ngIf='step == 1'></step-1>
   <step-2 *ngIf='step == 2'></step-2>
   <step-2 *ngIf='step == 2'></step-2>
   `
})
export class ProjectFormComponent {

    constructor(params: RouteParams, public step){
       if(params.get('id'){
           if(params.get('step')){ 
              this.step = parseInt(params.get('step'))
              editProject(params.get('id'), this.step)
           } else() { 
              this.step = 1 
              editProject(params.get('id'), 1)
           } 
       } else {
           this.step = 1
           createNewProject()
       }
    }
    createNewProject(){
       ...
    }
    editProject(id, step) { 
       ... 
    }
}

从“angular2/路由器”导入{RouteParams}；
@组成部分({
...
模板：`
`
})
导出类ProjectFormComponent{
构造函数（参数：路由图、公共步骤）{
if（参数get（'id'））{
if（params.get（'step'）{
this.step=parseInt（params.get（'step'））
editProject（params.get（'id'），this.step）
}else（）{
此步骤=1
editProject（参数get（'id'），1）
} 
}否则{
此步骤=1
createNewProject（）
}
}
createNewProject（）{
...
}
编辑项目（id，步骤）{
... 
}
}

步骤

可在模板中选择显示所需零件