如何将一个函数从根组件调用到<router-outlet>中的另一个组件

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

@Component({
  selector: 'app-root',
  template: `
    <h1>根组件</h1>
    <button (click)="callFunction()">调用函数</button>
    <router-outlet></router-outlet>
  `,
})
export class AppComponent {
  constructor(private router: Router) {}

  callFunction() {
    // 执行逻辑代码
    console.log('函数被调用了');
    // 导航到目标组件
    this.router.navigate(['/target']);
  }
}

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

@Component({
  selector: 'app-target',
  template: `
    <h2>目标组件</h2>
  `,
})
export class TargetComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    // 在目标组件中调用根组件中定义的函数
    this.router.events.subscribe(() => {
      // 执行逻辑代码
      console.log('函数被调用了');
    });
  }
}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TargetComponent } from './target.component';

const routes: Routes = [
  { path: '', redirectTo: '/target', pathMatch: 'full' },
  { path: 'target', component: TargetComponent },
];

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