Question

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

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

第一部分：

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中，获取＆＃39; soruLst＆＃39;来自服务并在本地更改（成功）
在FirstComponent中，发送已更改的＆＃39; soruLst＆＃39;服务（成功 - updateSoruLst）
在服务中，更新＆＃39; sorular＆＃39;，在＆nbsp; updateSoruLst＆＃39; （失败 - 它没有改变，只是改变了功能范围，但我仍然无法读取更新的值）。我有问题：

updateSoruLst（soruLst：[SoruModel]）{ this.sorular = soruLst; }

＆＃34; this.sorular＆＃34;价值不会全球变化。

在SecondComponent中，阅读更新的＆＃39; sorular＆＃39;来自服务（失败，仍然无法读取更新的值）

我想我必须改变我的服务，但无法找到我必须改变的地方..

如何在服务中更新我的对象？

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

您还可以找到一个简单的 rxjs主题示例，以使用here中的服务在组件之间共享数据。

Angular 5服务变量值更新

1 个答案: