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

问题描述

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

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 )

在 Service 中，更新 'sorular'，在 'updateSoruLst' 中(失败 - 它没有改变，只是在函数范围内改变，但我仍然无法读取更新的值).我有这个问题:

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屋！