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

我是新来的角。我有一个包含表单步骤的项目创建页面。第一步创建项目，然后在其他步骤中，我只更新每个步骤的相关信息。正如我想象的路线应该是这样的：如何在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}), 
])

我可以指定哪些步骤我应该从路由中显示或者我必须设置步骤名称作为它们在主要组件之间切换的参数。任何建议这种情况，我是否正确地做着？

来源

2016-02-05 Rabih

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

@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-05 14:13:57

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

回答

相关问题