Angular 角度：如何将数据从服务绑定到组件，以便服务中的新数据更新组件？

当新数据到达服务时，如何使该数据显示在组件中

在我的标题中，我有一个按钮，允许用户在英语和西班牙语之间切换应用程序。该按钮可切换标题（一个组件）中的文本，但不能切换视图主体（另一个组件）中的文本

在

app.module.ts中

add

从'@angular/material/toolbar'导入{MatToolbarModule}；
进口：[
...
Mattoolbar模块，
],

在

app component.html

中，将所有内容替换为：

单击
Español
按钮将视图更改为：


该语言在标题中更改，但在正文中更改。控制台日志显示，当应用程序加载
language.service.ts
时，会将数据发送到
body.component.ts
。单击按钮会将数据发送到
header.component.ts
和
language.service.ts
，但不会发送到
body.component.ts
，并且body不会更改语言

如何使单击按钮更改
body.component.ts
中的语言

还有一件事…有没有一个网站，我可以把这个软件放在那里，这样你就可以轻松地玩它了？普朗克？我从未使用过这些工具。
在您的LanguageService中，创建一个行为类似Subject的变量

export class LanguageService {

  language: BehaviorSubject = new BehaviorSubject<string>('en-US');

  changeLanguage(language): void {
    this.language.next(language);
  }

  getLanguage(): Observable<string> {
   return this.language.asObservable();
  }

}

你可以把代码放在StackBlitz里。“谢谢！我读了好几篇关于行为主体的博客，但我不理解他们，他们也没有给出有效的代码。我会再深入一次。我用完成的工作代码做了一次StackBlitz：
ng serve -o

export class LanguageService {

  language: BehaviorSubject = new BehaviorSubject<string>('en-US');

  changeLanguage(language): void {
    this.language.next(language);
  }

  getLanguage(): Observable<string> {
   return this.language.asObservable();
  }

}

ngOnInit() {
  this.languageService.getLanguage().subscribe((language) => {
    this.defaultLanguage = language; 
  });
}