Question

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

我尝试了可以正常工作的本地存储，但是还有其他方法可以使它在整个应用程序中可用吗？

Stackblitz URL：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)
);

Answer 1

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

Answer 2

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

Answer 3

通过添加ChangeDetectorRef

，此问题已得到解决。

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

constructor(
     private ref: ChangeDetectorRef
){}

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

用户通过用户页面对其进行更新后，如何使应用标题保持静态？

3 个答案: