angular2 wizard, is it possible to show multiple steps at the same time while they're configured for routing

[hani]

So i have a full routing system in place and working, but i noticed since it's based on URL you could only navigate to one view at a time. Since i'm writing a wizard, i'll need to review the wizard steps before submission to server. The review (potentially a step on its own) should show all the steps at the same time. This is an issue since wizard steps are configured to be routed and i have no idea how to show them at the same time.

I've tried to create a preview step and imported all the steps that need previewing, but that made new instances of each step and hence no data to preview. Here is a sample code for a preview step:

import {Component} from 'angular2/core';

import {Step1} from './step1';
import {Step2} from './step2';


@Component({
    selector: 'preview',
    directives: [Step1, Step2], //Oops! new instances go in here. Not helpful
    template: '<div><step1>Loading step1...</step1><step2>Loading step2...</step2></div>'
})
export class Preview {
   
}

And here's a code for the wizard:

import {Component} from 'angular2/core';
import {RouteConfig, Router} from 'angular2/router';

import {Step1} from './step1';
import {Step2} from './step2';
import {Preview} from './preview';



@RouteConfig([
    { path: '/step1', name: 'step1', component: Step1, useAsDefault: true },    { path: '/step2', name: 'step2', component: Step2 },
    { path: '/preview', name: 'preview', component: Preview}

])
@Component({
    selector: 'preview',
    template: '<div><button type="button" (click)="navigate()">Navigate</button><button type="button" (click)="preview()">Preview</button><router-outlet></router-outlet></div>'
})
export class Wizard {
    constructor(private _router: Router) { }


    navigate() {
        this._router.navigate(['step2']);
    }
    preview() {
        this._router.navigate(['preview']);
    }
}

I'm not even sure if have a separate step for previewing is the way to go in Angular2, so I appreciate any feedback on how Angular2 solves such problems.

[Günter Zöchbauer]

I don't really understand your problem but you could route to a component that shows all your wizard steps in an *ngFor inside a single component that you actually route to.

http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468

contains an example how to use DynamicComponentLoader with *NgFor

Could be totally off though...

[hani]

Is there a way to tell angular router or angular injector NOT to create a new instance and re-use what you pass to them? Just a matter of component re-use and passing existing references. I thought about injecting the steps when trying to show all of them on the same page, but resolving providers (made steps injectable) seem to re-create instances. 

[Günter Zöchbauer]

No, that's not possible. Just move the data out of your component into a service, then show the same component as often as you want with the same service instance.

(like already answered on SO)