我无法更新我的 Angular 服务变量值。
我有两个不相关的组件,我想使用服务将更新后的对象从一个组件发送到另一个组件。但我无法更新服务中的对象。
第一部分:
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)
在服务中,在“updateSoruLst”中更新“sorular”(失败 - 它没有改变,只是在功能范围内改变,但我仍然无法读取更新的值)。我对此有疑问:
updateSoruLst( soruLst : [SoruModel] ) { this.sorular = 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 {
}
您还可以在 here 中找到一个简单的 rxjs Subject 示例,以在使用服务的组件之间共享数据。 .
关于Angular 5服务变量值更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49592546/