Angular 5 服务变量值更新
Posted
技术标签:
【中文标题】Angular 5 服务变量值更新【英文标题】:Angular 5 service variable value updating 【发布时间】:2018-09-10 13:33:12 【问题描述】:我无法更新我的角度服务变量值。
我有两个不相关的组件,我想使用 service 将更新的对象从一个发送到另一个。但我无法更新服务中的对象。
第一个组件:
import SoruService from '../soru.service';
import SoruModel, SecenekModel from '../soruModel';
@Component(
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ['./first.component.scss'],
providers: [SoruService]
)
export class FirstComponent implements OnInit
public soruLst : [SoruModel];
constructor( private soruServis : SoruService )
ngOnInit()
this.soruServis.getirSoruLst().subscribe( veri =>
this.soruLst = veri as [SoruModel];
)
//// MAKE SOME CHANGES ON "soruLst" locally
// Send updated 'soruLst' to service
updateSoruLst()
this.soruServis.updateSoruLst(this.soruLst);
我的服务:
import Injectable from '@angular/core';
import SoruModel, SecenekModel from './soruModel';
import Http from '@angular/http';
const metaJson = 'assets/data/Meta.json';
@Injectable()
export class SoruService
public sorular = [] as [SoruModel];
constructor( private http:Http )
this.sorular = [] as [SoruModel];
getirSoruLst()
return this.http.get(metaJson)
.map(yanit => yanit.json())
updateSoruLst( soruLst : [SoruModel] )
this.sorular = soruLst;
getSorular() : [SoruModel]
return this.sorular;
第二个组件:
mport SoruService from '../soru.service';
import SoruModel, SecenekModel from '../soruModel';
@Component(
selector: 'app-second',
templateUrl: './second.component.html',
styleUrls: ['./second.component.scss'],
providers: [SoruService]
)
export class SecondComponent implements OnInit
public soruLst : [SoruModel];
constructor( private soruServis : SoruService )
ngOnInit()
this.soruLst = this.soruServis.getSorular();
console.log(this.soruLst);
这就是我想做的:
在 FirstComponent 中,从服务中获取 'soruLst' 并在本地进行更改(成功)
在 FirstComponent 中,将更改后的“soruLst”发送到服务(成功 - updateSoruLst)
在服务中,更新“sorular”,在“updateSoruLst”中(失败 - 它没有改变,只是在函数范围内改变,但我仍然无法读取更新的值)。我对此有疑问:
updateSoruLst(soruLst:[SoruModel]) this.sorular = soruLst;
"this.sorular" 值不会全局更改。
-
在 SecondComponent 中,从服务中读取更新的“sorular”(失败,仍然无法读取更新的值)
我想我必须改变我的服务,但找不到我必须改变的地方..
如何更新服务中的对象?
【问题讨论】:
每个组件在其提供者中都有 SoruService。所以每个都有自己专用的 SoruService 实例。服务应该在 NgModule 中提供,而不是在组件中。阅读文档:angular.io/guide/hierarchical-dependency-injection。当您使用它时,还请阅读有关 Http 的部分,并停止使用已弃用的 Http 服务。然后阅读 RxJS 以及使用服务的组件交互:angular.io/guide/…。 【参考方案1】:正如 JB Nizet 所说,您应该提供比FirstComponent
和SecondComponent
更高级别的服务。这意味着应该提供SoruService
这样,两个组件将共享同一个服务实例,您将能够实现所需的功能。 假设您的组件位于应用的根模块中。从组件装饰器中删除提供者属性并更改您的模块,如下所示。
import NgModule from '@angular/core';
import BrowserModule from '@angular/platform-browser';
import FirstComponent from './first.component';
import SecondComponent from './second.component';
import SoruService from '../soru.service';
@NgModule(
imports: [
BrowserModule
],
declarations: [
AppComponent,
FirstComponent,
SecondComponent
],
providers: [
SoruService
],
bootstrap: [AppComponent]
)
export class AppModule
您还可以在here 中找到一个简单的 rxjs 主题 示例来使用服务在组件之间共享数据。
【讨论】:
太好了!谢谢以上是关于Angular 5 服务变量值更新的主要内容,如果未能解决你的问题,请参考以下文章