加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Angular 5服务变量值更新

发布时间:2020-12-17 10:25:39 所属栏目:安全 来源:网络整理
导读:我无法更新我的角度服务变量值. 我有两个不相关的组件,我想使用服务将更新的对象从一个发送到另一个.但是我无法在服务中更新对象. 第一部分: import { SoruService } from '../soru.service';import { SoruModel,SecenekModel } from '../soruModel';@Compo
我无法更新我的角度服务变量值.

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

第一部分:

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’发送到服务(Success – updateSoruLst)
>在服务中,更新’sorular’,在’updateSoruLst’中(失败 – 它没有改变,只是在功能范围内改变但我仍然无法读取更新的值).我有问题:

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

“this.sorular”值不会全局变化.

>在SecondComponent中,从服务中读取更新的’sorular'(失败,仍然无法读取更新的值)

我想我必须改变我的服务,但找不到我必须改变的地方..

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

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

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

这样,组件将共享相同的服务实例,您将能够实现所需的功能.
假设您的组件位于app的根模块中.从组件装饰器移除提供程序属性并更改模块,如下所示.

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中的服务在组件之间共享数据.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读