为什么在使用angular中的route.navigate进行路由时，父组件中注入的服务不会传递给子组件

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [myService]="myService"></app-child>
  `,
  providers: [MyService]
})
export class ParentComponent {
  myService: MyService;

  constructor() {
    this.myService = new MyService();
  }
}

import { Component, Input } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ myService.getData() }}</p>
  `
})
export class ChildComponent {
  @Input() myService: MyService;
}

import { Component, ViewChild } from '@angular/core';
import { MyService } from './my.service';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `,
  providers: [MyService]
})
export class ParentComponent {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  myService: MyService;

  constructor() {
    this.myService = new MyService();
  }

  ngAfterViewInit() {
    this.childComponent.myService = this.myService;
  }
}

import { Component } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ myService.getData() }}</p>
  `
})
export class ChildComponent {
  myService: MyService;
}

import { Injectable } from '@angular/core';

@Injectable()
export class SharedService {
  data: any;

  setData(data: any) {
    this.data = data;
  }

  getData() {
    return this.data;
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-parent',
  template: `
    <button (click)="setData()">Set Data</button>
    <app-child></app-child>
  `,
  providers: [SharedService]
})
export class ParentComponent {
  constructor(private sharedService: SharedService) {}

  setData() {
    this.sharedService.setData('Hello from parent');
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ sharedService.getData() }}</p>
  `
})
export class ChildComponent {
  constructor(public sharedService: SharedService) {}
}