使用路由器將對象傳遞給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組件

回答

相關問題