如何在从一个组件导航到另一个组件时刷新其他组件(Angular 7，router.navigate)中的数据？

import { Router } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-source-component',
  template: `
    <button (click)="navigateToDestination()">导航到目标组件</button>
  `
})
export class SourceComponent {
  constructor(private router: Router) {}

  navigateToDestination() {
    this.router.navigate(['/destination']);
  }
}

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-destination-component',
  template: `
    <h1>目标组件</h1>
    <p>{{ data }}</p>
  `
})
export class DestinationComponent implements OnInit {
  data: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.data = params['data'];
    });
  }
}

import { Router } from '@angular/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-source-component',
  template: `
    <button (click)="navigateToDestination()">导航到目标组件</button>
  `
})
export class SourceComponent {
  constructor(private router: Router) {}

  navigateToDestination() {
    const dataToRefresh = '要刷新的数据';
    this.router.navigate(['/destination'], { queryParams: { data: dataToRefresh } });
  }
}

import { ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-destination-component',
  template: `
    <h1>目标组件</h1>
    <p>{{ data }}</p>
  `
})
export class DestinationComponent implements OnInit {
  data: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.queryParams.subscribe(params => {
      this.data = params['data'];
      // 在这里可以更新目标组件中的数据
    });
  }
}