使用路由器将对象传递给Angular2组件

我正在戳Angular2以及它的Routing系统。我创建“工程向导” @Component使用@RouteConfig“孩子” @Component S和它看起来像这样：使用路由器将对象传递给Angular2组件

const enum State { 
    welcome, basicData, groupsData, overview 
} 

const enum Condition { 
    back 
} 

@Component({ 
    selector: 'router-outlet', 
    templateUrl: '/app/templates/wizard/project/project-wizard-container.html', 
    directives: [ 
     ROUTER_DIRECTIVES, 
    ], 
}) 

@RouteConfig([ 
    { path: '/',   name: 'ProjectWizardWelcome', component: ProjectWizardWelcomeComponent, useAsDefault: true }, 
    { path: '/step2', name: 'ProjectWizardStep2', component: ProjectWizardStep2Component }, 
    { path: '/step3', name: 'ProjectWizardStep3', component: ProjectWizardStep3Component }, 
    { path: '/overview', name: 'ProjectWizardOverview', component: ProjectWizardOverviewComponent }, 
]) 

export class ProjectWizardComponent { 

    mock: Mock = new Mock(); 

    private mapping: {key: State, value: string}[] = [ 
     { key: State.welcome, value: 'ProjectWizardWelcome' }, 
     { key: State.basicData, value: 'ProjectWizardStep2' }, 
     { key: State.groupsData, value: 'ProjectWizardStep3' }, 
     { key: State.overview, value: 'ProjectWizardOverview' }, 
    ]; 

    private transitions: FSM.Transition<State, Condition>[] = [ 
     { from: State.welcome, conditions: [],    to: State.basicData }, 
     { from: State.basicData, conditions: [Condition.back], to: State.welcome }, 
     { from: State.basicData, conditions: [],    to: State.groupsData }, 
     { from: State.groupsData, conditions: [Condition.back], to: State.basicData }, 
     { from: State.groupsData, conditions: [],    to: State.overview }, 
     { from: State.overview, conditions: [Condition.back], to: State.groupsData }, 
    ]; 

    private fsm: FSM<State, Condition> = new FSM(State.welcome, this.transitions); 

    constructor(
     private _router: Router, 
     private _routeParams: RouteParams) { 
    } 

    onPrev(): void { 
     var prevState = this.fsm.apply([Condition.back]).get(); 
     var prevRoute = this.mapping[prevState].value; 
     this._router.navigateByInstruction(this._router.generate([prevRoute]), true); 
    } 

    onNext(): void { 
     var nextState: State = this.fsm.apply([]).get(); 
     var nextRoute = this.mapping[nextState].value; 
     this._router.navigateByInstruction(this._router.generate([nextRoute]), true); 
    } 

    onCancel(): void { 
     this._router.navigate(['Welcome']); 
    } 

}

我需要共享跨越“孩子”组件Mock对象，我想了解我的选择是。我的当前的理解是：

它可以使用容器对象，它是@Injectable像一些Service共享。
使用RouterData。在这种情况下，我需要从URL解组数据。

但是有没有其他方法可以直接使用路由器将此对象传递给@Component？

来源

2016-02-13 hahn

不，这两个是可用选项。我会建议一个共享服务。

来源

2016-04-04 14:26:42

使用路由器将对象传递给Angular2组件

回答

相关问题