用户通过用户页面更新应用程序标题后，如何使应用程序标题静态化？答案

【问题标题】：How can I make application title static after user update it though user page?用户通过用户页面更新应用程序标题后，如何使应用程序标题静态化？
【发布时间】：2019-06-19 13:39:56
【问题描述】：

我在应用组件的模板上设置标题。标题已根据用户页面上的用户输入进行更新。如何在整个应用中使用该标题？

我尝试过使用本地存储，但有没有其他方法可以在整个应用程序中使用它？

Stackblitz 网址：https://stackblitz.com/edit/angular-kfptvs

[更新]

当我在另一个应用程序上实现了同样的功能时，我开始收到错误：

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: Bob'. Current value: 'null: Rob'.

执行以下代码时出现上述错误：

this._userService.titleObs.subscribe((title) => {
      this.title = title;
})

我已经通过下面的代码进行了修复，但是有人可以提出更好的修复方法吗？

this._userService.titleObs.subscribe(
  title => setTimeout(() => this.title = title, 0)
);

【问题讨论】：

你使用了服务，这是最好的方法
@Maryannah 是的。但是当用户导航到主页时，标题有一个未定义的值。
不在你的闪电战中，它会重新加载页面。但我只是回答你原来的问题，如果你的代码有问题，请详细解释！
在您的 Stackblitz 中，页面被重新加载，因为您使用标记进行导航而不是路由器链接。
@riorudo 使用 routerLink 后，它可以工作。如果你想发表你的答案，我会接受。谢谢

标签： javascript angular routing

【解决方案1】：

为此使用该服务是一个好方法。对于导航，您应该使用路由器链接而不是通过<a> 标签进行导航。这样可以避免重新加载页面。

【讨论】：

【解决方案2】：

正如 Maryannah 所说，您使用的服务是解决问题的好方法。它对您不起作用的原因可能是因为您的服务位于临时文件夹下。如果您将服务放在根文件夹中，则所有组件都可以访问相同的数据。

【讨论】：

【解决方案3】：

问题已通过添加ChangeDetectorRef得到解决

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

constructor(
     private ref: ChangeDetectorRef
){}

this._userService.titleObs.subscribe((title) => {
      this.title = title;
      this.ref.detectChanges()
})

【讨论】：