Angular2中如何正确配置高级路由

Question

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

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}),
])

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

Answer 1

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

@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) { 
       ... 
    }
}

step在模板中可以选择性显示需要的部分

Angular2中如何正确配置高级路由

How to correctly configure an advanced route in Angular 2

angular

angular2-routing

angular2-forms