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 所说,您应该提供比FirstComponentSecondComponent 更高级别的服务。这意味着应该提供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 服务变量值更新的主要内容,如果未能解决你的问题,请参考以下文章

在C ++中更新const变量值

触发更新 ServletContext 中的全局变量值

如何在 SwiftUI 中更新变量值?

仅在目标 C 中本地更新全局变量值

如何在 Django 中获取更新的类变量值

在 UDF Pyspark 中更新变量值