在 Angular 4 中更新服务数据
Posted
技术标签:
【中文标题】在 Angular 4 中更新服务数据【英文标题】：Update service data in Angular 4 【发布时间】：2018-01-19 17:34:28 【问题描述】：服务数据对象在几个组件中更新，现在如何在第一个 init 组件中使用对象的最后更新值。在该组件中，当我在 ngOnInit 中初始化对象时，它没有最后一个值。
那么我如何才能触发对象的最后一次更改并将其放入组件中？
在役：
title: string;
在第一个组件中：
appTitle: string;
ngOnInit()
this.appTitle = this.titleService.title; // <- here is first init and have default value;
在第二个组件中：
appTitle: string;
ngOnInit()
this.titleService.title = 'Login';
this.appTitle = this.titleService.title; // <- here is first init and have default value;
并且在组件的 html 文件中，我使用简单的 appTitle
现在我喜欢在第一个组件appTitle 中像上次服务对象更新一样“登录”。但我无法以这种方式实现它。
我无法从第一个组件的 ngOnInit 中的第二个组件获取最新更新。
【问题讨论】：
看看这个link共享服务是你所追求的，你需要在服务中使用behaviour subject来更新组件
使用 Observables 和 Subscriptions 在初始化时等待你的组件，直到他拉取最新版本的对象。应该直截了当。如果您需要代码示例，请提供一些您自己的代码，我会尝试添加解决方案。
试试gist.github.com/jhades/…解释blog.angular-university.io/angular-2-rxjs-common-pitfalls
你能解释一下你的问题吗？如果您将代码附加到问题中，我们可以为您提供更多帮助:)
【参考方案1】：
我不确定您的问题是什么，但如果您希望与其他组件共享服务中的某些数据，您可以执行以下操作。
Angular 2/4 内置了数据绑定，这意味着如果您将组件中的服务作为公共使用，您可以直接操作对象，并且所有其他组件都将具有更新的版本。
例如在你的组件中
constructor(public myService:MyService)
myService.sharedData = someAttr:"Updated"; // can also be used directly in your view.
为您服务：
public sharedData:any = someAttr:"Hello";
constructor()
在你的 html 中：
<body>myService.sharedData</body> <!--Will display your shared data object-->
【讨论】：
是的，我已经在 app.module.ts 中将我的组件注册为公共组件，但是通过此代码流，我在第一个组件中的数据不会随着最后一次更改“登录”而更新，ngOnInit 会在前面第二个组件，我无法更新第二个组件中的值 不要在你的 html 中使用appTitle，并从你的组件中移除本地的appTitle: string。相反，在您的 html 中，写上titleService.title。您可以直接使用该变量，而不是在组件中声明一个本地变量。
好朋友，这就是我想要的。非常感谢，@约翰。如果你有时间，你能告诉我如何更新我的本地组件 var。
我很高兴你知道了。如果你需要一个与你的服务同步的局部变量，那么你需要它是一个对象（比如var myVar:any = myString:""），然后它必须引用（指向）你的服务中的对象。然后，您将始终在引用它的所有组件中处理同一个对象。希望这是可以理解的。所以在你的组件myObject = myService.myObject 和你的html 中：myObject。重要的是变量是一个对象，而不是一个原始的（例如字符串或数字）【参考方案2】：
你可以定义一个getter：
get appTitle()
return this.titleService.title
现在，当您致电 this.appTitle 时，您会从服务中获得新的头衔。
【讨论】：
我尝试了 getter，但问题是第一个组件 ngOnInit 在更新之前发生，我无法通过此事件获取它。 您想按顺序加载组件吗？换句话说，你想总是在第一个组件之后加载第二个组件吗？ 是的，第一个用于面包屑，第二个在另一个文件夹中，用于登录。 当您使用 getter 时，在您的组件中首次更改后，它将检查新值。也许你的第一个组件没有变化/事件，嗯？如果是这样，您可能需要强制 angular 重新检查值 构造函数（受保护的_changeDetectorRef：ChangeDetectorRef） _markForCheck（）：无效 this._changeDetectorRef.markForCheck（）；以上是关于在 Angular 4 中更新服务数据的主要内容，如果未能解决你的问题，请参考以下文章
Angular 4 - 为 Facebook 动态更新 Meta 标签（打开图表）
如何使用 Angular 4 元服务动态更新打开的图形标签？ [复制]