Angular 2 lazy loading - inputs/outputs

Question

I am trying to pass inputs/outputs to the lazy loaded component, but I'm not sure how I can do that.

If it's not lazy loaded, I know that I can do that like this.

test.ts

testdata: string;

ngOnInit(){
  this.testdata = "TEST";
}

test.html

<test-component [data]="testdata"></test-component>

testcomponent.ts

@Input() data: string;

But what if testcomponent is lazy loaded and I have something like this?

testcomponent is loaded, when user goes on specific path.

test.html

<router-outlet></router-outlet>

Answer 1

You can use one of the following:

1. use a query string to pass the data to lazy loaded components; or

2. use a shared service to pass the data from main component and store the data in a variable and when the lazy component is loaded just read the value of this variable in onInit function

Answer 2

There is no way to use binding with components added by the router or ViewContainerRef.createComponent.

Use a shared service to communicate with components that are not direct parent-child like explained in https://angular.io/docs/ts/latest/cookbook/component-communication.html