как передать данные от компонента к компоненту при маршрутизации на месте в Angular

Question

Я знал о @Input & @Output в Angular 7 (2+) для передачи данных от родителя к ребенку и от ребенка к родителю соответственно.Он достиг цели при создании простого приложения.

Но теперь у меня есть реальные приложения и маршруты на месте, и по какой-то причине мне нужно передать данные из родительского компонента в дочерний компонент и наоборот.

app-rout.config.ts

import { NgModule } from '@angular/core';
/* all imports */



const routes: Routes = [
{ path: '', pathMatch: 'full', component: AppComponent },
{ path: 'jobs', canActivateChild: [AuthGuard], component: HomeComponent, 
 children: [
 { path: 'list',       component: ListJobsComponent },
 { path: 'create', component: CreateJobComponent },
]},
{ path: 'not-found', component: NotFoundComponent },
{ path: '**', redirectTo: 'not-found' }
];


@NgModule({
 imports: [
  RouterModule.forRoot(routes)
 ],
 exports: [RouterModule]
 })
 export class AppRoutingModule { }

Теперь мне нужно передать некоторые данные из AppComponent в ListJobsComponent

app.component.html

<div class="container">
 <div class="page-header">
 <h1>Hello Angular7 </h1>
</div>
 <app-header></app-header>
 <router-outlet></router-outlet>
</div>

app-list-jobs.component.html

<div class="row">
 {{parentComponentData}}
</div>

app-list-jobs.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
selector: 'app-child',
templateUrl: './child.component.html',
 styleUrls: ['./child.component.css']
 })

 export class ChildComponent implements OnInit {
  @Input('parentComponentData') parentComponentData: string;
  @Output() onHit: EventEmitter<string> = new EventEmitter<string>();

  constructor() { }

  ngOnInit() {
  }}

Я знаю, что это может быть реализованотаким хакерским способом, как хранение в localStorage или sessionStorage и т. д.

Как правильно передать эти данные?

Спасибо !!