时间问题:如何从 angular2 服务中获取变量的正确值
Timing issue: How can I get the correct value of a variable from angular2 service
在 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++ 之后获得正确的值;已达到最大值?
这是 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
});
}
...
}
在 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++ 之后获得正确的值;已达到最大值?
这是 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
});
}
...
}