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

【问题标题】：How to correctly configure an advanced route in Angular 2如何在 Angular 2 中正确配置高级路由
【发布时间】：2016-05-15 04:05:48
【问题描述】：

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

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

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

【问题讨论】：

标签： angular angular2-routing angular2-forms

【解决方案1】：

您可以将 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在模板中可以选择性的显示需要的部分

【讨论】：