Как правильно настроить продвинутый маршрут в Угловом 2

Question

Я новичок в угловом. У меня есть страница создания проекта, которая содержит шаги формы. Первые шаги создают проект, а затем на других этапах я просто обновляю информацию о каждом шаге. как я предполагаю, маршрут для этого должен быть примерно таким:

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 доступен в шаблоне для выборочного отображения требуемой части