1

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

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

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

4

1 回答 1

3

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

@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可在模板中选择性地显示所需的部分

于 2016-02-05T14:13:57.823 回答