Как передать динамические данные из одного компонента в другой с помощью маршрутизатора-розетки в angular 8 без обновления страницы?

Question

Я пытаюсь переключить sidenav в angular 8, который включает в себя отправку динамической формы данных родительского элемента дочернему компоненту.Я могу сделать это на статическом компоненте (app-header), но он обновляет всю страницу при использовании розетки маршрутизатора.Даже роутер-розетка является именованной, хотя я надеюсь, что это не должно иметь влияния.

app.component.html

<app-header [inputSideNav] = "sidenav"></app-header>
<mat-sidenav-container>

    <mat-sidenav mode="push" #sidenav >
      <router-outlet  name="sidebarOutlet"></router-outlet>
    </mat-sidenav>

    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>

</mat-sidenav-container>

sidebar.component.html

<mat-nav-list dense role="navigation" >
  <a mat-list-item *ngFor="let project of projects"  (click)="inputSideNav.toggle()" [routerLink]="['/projects', project.project_id]">
    {{project.project_id}}-{{project.project.topic}}
  </a>
</mat-nav-list>

боковая панель.component.html

import { Component, OnInit, Input } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatSidenav} from '@angular/material';

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

export class SidebarComponent implements OnInit {
  @Input() inputSideNav: MatSidenav;

  public projects = [];
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.getProjectsList();
  }

header.component.html

<mat-toolbar color="accent">

  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="inputSideNav.toggle()">menu</mat-icon>
    </button>
  </mat-toolbar-row>

</mat-toolbar>

header.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { MatSidenav} from '@angular/material';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
@Input() inputSideNav: MatSidenav;
  constructor() { }

  ngOnInit() {
  }

}

Я использую их для маршрутизации

app-routing.module.ts

const routes: Routes = [
  { path: '', component: SidebarComponent, outlet: 'sidebarOutlet'},
  { path: 'projects/:id', component: EngagementListComponent }];