Angular 5服务变量值更新 [英] Angular 5 service variable value updating

问题描述

我无法更新我的角度服务变量值.

I can not update my angular service variable value.

我有两个不相关的组件，我想使用service将更新的对象从一个对象发送到另一个对象.但是我无法更新服务中的对象.

I have two non-related components, and i want to send updated object from one to other one , using service . But I can't update object in 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);
    }

}

---

我的服务:

---

My Service :

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;
    }

}

---

第二部分:

---

Second Component :

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);
    }
}

---

这就是我想要做的:

---

This is what i want to do :

1. 在FirstComponent中，从服务中获取"soruLst"并在本地进行更改(成功)

1. in FirstComponent, get 'soruLst' from service and change it locally (Success)

在FirstComponent中，将已更改的"soruLst"发送到服务(成功-updateSoruLst)

in FirstComponent, send changed 'soruLst' to service (Success - updateSoruLst )

在服务中，在"updateSoruLst"中更新"sorular"(失败-它没有改变，只是功能范围发生了改变，但我仍然无法读取更新的值).我对此有疑问:

in Service, update 'sorular', in 'updateSoruLst' (Fail - it's not changing, only changing in function scope but i still can't read updated value) . I have problem with that :

updateSoruLst(soruLst:[SoruModel]){ this.sorular = soruLst; }

updateSoruLst( soruLst : [SoruModel] ) { this.sorular = soruLst; }

"this.sorular"值不会全局更改.

"this.sorular" value doesn't change globally.

1. 在SecondComponent中，从服务读取更新的'sorular'(失败，仍然无法读取更新的值)

---

我认为我必须更改服务，但是找不到我必须更改的地方.

---

I think i must change my service , but could't find where must i change..

如何更新服务中的对象?

How can i update my object in service ?

推荐答案

如JB Nizet所述，您应该提供比FirstComponent和SecondComponent更高级别的服务.这意味着应该提供SoruService

As JB Nizet mentioned, you should provide your service in a higher level than the FirstComponent and the SecondComponent. That means SoruService should be provided

• 在您的模块类中
• 或在上述组件的父组件类中(如果有的话)

这样，两个组件将共享同一服务实例，您将能够实现所需的功能.

假设您的组件位于应用程序的根模块中.
从组件装饰器中删除提供者属性，然后按如下所示更改您的模块.

In that way both the components will share the same instance of the service and you will be able achieve what you need.

Assuming that you have your components in the root module of the app.
Remove the provider attributes from the component decorators and change your module like below.

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 {
}

您还可以在rxjs主题示例，以使用服务在组件之间共享数据. rel ="nofollow noreferrer">此处.

Also you can find a simple rxjs Subject example to share data among components using services in here.

这篇关于Angular 5服务变量值更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！