Home:ALL Converter>Angular 8 passing data to Child routes

Angular 8 passing data to Child routes

Ask Time:2020-11-06T19:25:05         Author:Nasrul Bharathi

Json Formatter

const routes: Routes = [
    {
        path:      'a',
        component: MainComponent,
        children:  [
            {
                path:      'ab',
                component: ABComponent
            },
            {
                path:      'ac',
                component: ACComponent
            }
        ],
    }

In Angular 8, Consider the above scenario that I need to pass data between MainComponent --> ABComponent

I don't want to use the service approach. I also tried to get data using this._router.getCurrentNavigation().extras.state but I am getting null [I used it in constructor]. I even try to retrieve data using window.history.state. Both are not working for the parent and child routing component. Does anyone know the reason why it is not working?

I could see there is an option to pass data in resolver but I really wonder is there any other way to pass data.

Note: Data is large so I don't want to pass it in params.

Adding more Information:

Using of below code will able to get data but there is a drawback.

ngOnInit() {
this.state$ = this.activatedRoute.paramMap
  .pipe(map(() => window.history.state))

}

Consider the below design

Left side Right Side

Maincomponent[Contains form] [ABComponent]Form Results in Table

Initial route url "../a" will display only form[left side] then in the url "../a/ab" will display both form and result.

When I am submitting form my route url will be [/a/ab]. Initially i will get data in state but while submitting form again with different values won't get the new data.

So kindly suggest what will be the good approach to tackle the above problem.

Author:Nasrul Bharathi,eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/64713727/angular-8-passing-data-to-child-routes
yy