javascript - 计时问题: How can I get the correct value of a variable from angular2 service

Question

在 Angular2 服务中，我在替换函数内提高变量的值。

我可以从另一个组件访问该值，但我总是得到起始值。

所以我总是得到 -> 0。如果我在服务的构造函数中更改它，我可以获得另一个值，但这不是我需要的。

这是我的 service.ts:

  export class MyService {
    colletion: Object = { foo: [], bar: [], somethig: [] }
      counter: any = 0;

      constructor() {    
          getSomeData();
      }

     getSomeData() {
      //Do stuff to get some data from server, then call:
      cleanStrings();
     }

      cleanStrings() {
        for (var i = 0; i < result.length; i++) {
          this.colletion[key][i] = key + " " + result[i].expression
          .replace(/string/g, match => {

            //HERE I RAISE THE VALUE
            this.counter++; 

            return 'FIELD-' + this.counter + '" />';
          });
        }
      }

    }

所以我想我遇到了时间问题。

这是我尝试获取“counter”的值 - app.component.ts:

  import { Component, ViewChild, QueryList, ViewChildren } from '@angular/core';
  import { MyService } from './services/my.service';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MyService]
  })

  export class AppComponent {

  collection: Object = {};
  counter: any;

  constructor(private _myService: MyService) {
    this.collection = _myService.colletion;
    this.counter = _myService.counter;

    console.log(this.counter); //Says -> 0
  }

我必须更改什么才能在 this.counter++; 之后获得正确的值已达到最大值？

Answer 1

这是 RxJS 的工作:

更新您的服务:

export class MyService {
  counter: number = 0;
  ...
  counterSubject: BehaviorSubject<number> = new BehaviorSubject(this.counter);
  subscribeCounter = (s:any) => {
    this.counterSubject.asObservable().subscribe(s); //subscription to the next counter values
    this.counterSubject.next(this.counterSubject.getValue()); //get the current value at subscription
  }
  ...
  getSomeData() {
    //Do stuff to get some data from server, then call:
    cleanStrings();
    counterSubject.next(this.counter);
  }
  ...
}

在您的组件中订阅它:

export class AppComponent implements OnInit {

  collection: Object = {};
  counter: number;

  constructor(private _myService: MyService) {
  }

  ngOnInit() {
    _myService.subscribeCounter((c) => {
      this.counter = c;
      console.log(this.counter); //incremented
    });
  }
  ...
}