Angular 5服务变量值更新
我无法更新我的角度服务变量值.
我有两个不相关的组件,我想使用服务将更新的对象从一个发送到另一个.但是我无法在服务中更新对象. 第一部分: 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’并在本地更改(成功)
“this.sorular”值不会全局变化. >在SecondComponent中,从服务中读取更新的’sorular'(失败,仍然无法读取更新的值) 我想我必须改变我的服务,但找不到我必须改变的地方.. 如何在服务中更新我的对象?
正如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中的服务在组件之间共享数据. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |