Angular 9:如何从子组件更改导航栏？

import { Injectable } from '@angular/core';
importimport { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class NavbarService {
  private navbarSubject = new Subject<string>();
  navbarObservable = this.navbarSubject.asObservable();

  changeNavbarText(text: string) {
    this.navbarSubject.next(text);
  }
}

import { Component, OnInit } from '@angular/core';
import { NavbarService } from 'path-to-navbar-service';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
  navbarText: string;

  constructor(private navbarService: NavbarService) { }

  ngOnInit() {
    this.navbarService.navbarObservable.subscribe(text => {
      this.navbarText = text;
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { NavbarService } from 'path-to-navbar-service';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
  constructor(private navbarService: NavbarService) { }

  ngOnInit() {
  }

  changeNavbarText() {
    this.navbarService.changeNavbarText('New Text');
  }
}

<button (click)="changeNavbarText()">Change Navbar Text</button>