观察角度中的变量变化
观察角度中的变量变化
提问于 2018-09-30 07:11:23
我正在尝试从angular服务订阅变量的更改，而不是在组件中订阅它。下面是我测试过的代码：
服务：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class testService {
detectChanges = new Subject();
myObject : any = {
test:"Test"
};
constructor() {
this.detectChanges.subscribe((data) => {
console.log("changed");
});
}
}组件：
import { Component } from '@angular/core';
import { testService } from './test-service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
$s;
constructor(private test: testService) {
this.$s = this.test.myObject;
}
}html:
<input [(ngModel)]="$s.test">
<h1>{{$s.test}}</h1>有没有办法做到这一点？与angularjs中的$watch类似，以下是示例https://stackblitz.com/edit/angular-cmyy66?file=src%2Fapp%2Fapp.component.html中的示例myObject将使用输入进行更改
回答 3
Stack Overflow用户
发布于 2018-09-30 07:20:33
您可以使用setter来执行以下操作：
服务：
private _myObject;
public get myObject() { return this._myObject; };
public set myObject(val) {
console.log("The value is changing");
this._myObject = val
};组件中的：
constructor(public test: testService) {
this.test.myObject="New test"; // This would cause "The value is changing" to be logged
}如果您愿意，也可以在set函数中通知您的主题
Stack Overflow用户
发布于 2018-09-30 07:41:46
我在stackblitz上创建了一个示例
基本上，您的服务如下所示：
@Injectable()
export class TestService{
private detectChanges: Subject<any> = new Subject<any>();
myobject$ = this.detectChanges.asObservable();
constructor() {
this.detectChanges.subscribe((data) => {
console.log("changed", data);
});
}
changeObject(myobject: any) {
this.detectChanges.next(myobject);
}
}订阅和更改主题的步骤
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
name = 'Angular';
constructor(private testService: TestService) {
this.testService.myobject$.subscribe((data) => {
this.name = data;
});
}
change(input) {
this.testService.changeObject(input);
}
}希望这能有所帮助。
Stack Overflow用户
发布于 2018-09-30 17:33:57
使用BehaviorSubject和getter/setter的最简单的解决方案；
@Injectable()
export class testService {
myObject: any = {
_test$: new BehaviorSubject("Test"),
set test(val) {
this._test$.next(val);
},
get test() {
return this._test$.getValue();
}
};
constructor() {
this.myObject._test$.subscribe((data) => {
console.log("changed", data);
});
}
}还可以看看OnChanges。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52573286
复制相关文章
相似问题