与静态组件共享数据 - Angular答案

【问题标题】：Share data with a static component - Angular与静态组件共享数据 - Angular
【发布时间】：2019-08-29 07:18:30
【问题描述】：

我加载所有页面的组件如下：

<app-header></app-header>
<div>

  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

我需要在任何替换路由器出口的组件中触发消息服务的任何操作在标题组件内的标题栏下方显示一些警报。我有一个通用的 messageService 跨组件使用，也作为提供程序添加到 app.module.ts

我的问题是，标题是静态的，这意味着除了页面加载之外不会发生任何事件。因此，即使触发了 messageService，即使我将订阅放在构造函数或 onInit 中，也绝对不会发生订阅。我不确定如何从标头组件中的订阅中获取价值。请赞成。

【问题讨论】：

就在header的ngOnInit订阅messageservice
尝试在header组件的ngOnInit中订阅messageService
我试过onInit。 OnInit 似乎只在页面加载时被调用一次。之后，只有路由器出口会经历页面加载，而标题则不会。所以 onInit 不会被调用。
看来您并不真正了解可观察对象的工作原理。如果你的 header 订阅了 ngOnInit 中的 messageService，它将接收到该服务发送的每条消息。这是一个异步订阅。您能否展示 messageService 代码、标头代码以及组件如何发送消息的示例？您能解释一下“标题是静态的”在技术上是什么意思吗？
我实际上有 setter 作为变量的赋值说“消息”和 getter 作为 Observable.of(message) 来订阅。对于主题，它正在处理 OnInit。谢谢大家。

标签： angular observable

【解决方案1】：

您可以从 header 组件的 ngOnInit 订阅MessageService。 ngOnInit 仅被调用一次，但订阅将保持活动状态，直到标头被销毁。确保在 MessageService 中存储消息的对象是可订阅的（如主题）。

例如。如果您的 MessageService 有一个 message$ 属性，该属性会在显示消息时更新。

export class MessageService {

  private _message$ = new Subject();

  constructor() { }

  public setMessage(msg: string) {
    this._message$.next(msg);
  }

  public getMessage(): Observable<string> {
    return this._message$.asObservable();
  }

}

您可以在标头中订阅getMessage 方法并将其分配给headerMessage。您可以使用headerMessage在标题html中显示消息

export class HeaderComponent implements OnInit {

  headerMessage: string;

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.messageService.getMessage().subscribe(message => this.headerMessage = message);
  }

}

当您需要在其他组件的标头中设置新消息时，您可以将 MessageService 注入该组件并使用下面的代码来做同样的事情。

this.messageService.setMessage('sample message');

这将触发headerComponent 中的getMessage 订阅，headerMessage 属性将更新为新消息 - '示例消息'。

【讨论】：