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>

Thank you guys. Its a shame, i completely missed that i can use services. — Štěpán Vyhnálek, Oct 14 '16 at 07:24

score 1 · Answer 1 · edited Oct 14 '16 at 06:58

1

You can use one of the following:

use a query string to pass the data to lazy loaded components; or
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

edited Oct 14 '16 at 06:58

jonrsharpe

answered Oct 14 '16 at 06:56

Atal Kishore

Why do lazy-loaded components do not pass data to `@Input()` variables? – Ahmad Habib Dec 10 '20 at 10:59

score 0 · Answer 2 · answered Oct 14 '16 at 06:53

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

2 Answers2