如何在 Angular 6 中观察服务变量 [英] How to watch service variable in Angular 6
问题描述
我几天来一直试图让 Angular 更新服务变量open_popup",但没有成功.
TLDR;我想要做的是,每当变量open_popup"发生变化时,让它在组件上也发生变化,也能够从组件函数中更改服务变量.
这是我迄今为止尝试过的.
<块引用>app/src/app/audience-creator/shared/audience-creator.service.ts
import { Injectable } from "@angular/core";从rxjs/index"导入{Observable};从rxjs/index"导入 { of };@Injectable()导出类 AudienceCreatorService {构造函数(私有 http:HttpClient){}public open_popup = false;公共切换创建者弹出(){this.open_popup = !this.open_popup;}popupIsOpen(): Observable{返回(this.open_popup);}}
<块引用>
app/src/app/audience-creator/audience-creator.component.ts
import {Stuff} from "@angular/core";@成分({选择器:'观众创造者',templateUrl: 'audience-creator.html'})导出类 AudienceCreatorComponent 实现 AfterViewInit、OnInit {public popup_is_open = false;@输入()观众创作者服务;ngOnInit() {this.audience_creator_service.popupIsOpen().subscribe(popup_is_open =>this.popup_is_open = popup_is_open);}}
<块引用>
app/src/app/audience-creator/audience-creator.html
-->{{ this.popup_is_open }} 变量总是假的.
不起作用
{{ this.popup_is_open }}
PS:只是试图将函数直接破解到模板中并且它可以工作,所以我绑定组件变量的方式一定有问题??
{{ Audience_creator_service.popupIsOpen().value }}
@Injectable()导出类 AudienceCreatorService {构造函数(私有 http:HttpClient){}公共 open_popup = false私有 isOpen: BehaviorSubject= 新行为主题(假);公共切换创建者弹出(){this.open_popup = !this.open_popup;this.isOpen.next(this.open_popup);}popupIsOpen(): Observable{返回 this.isOpen.asObservable();}}
ive been trying to make Angular update the service variable "open_popup" for days with no luck.
TLDR; What I'm trying to do, is whenever the variable "open_popup" changes, make it change on the component too also be able to change the service variable from a component function.
This is what I've tried so far.
app/src/app/audience-creator/shared/audience-creator.service.ts
import { Injectable } from "@angular/core";
import {Observable} from "rxjs/index";
import { of } from "rxjs/index";
@Injectable()
export class AudienceCreatorService {
constructor(private http: HttpClient) {}
public open_popup = false;
public toggleCreatorPopup() {
this.open_popup = !this.open_popup;
}
popupIsOpen(): Observable<any> {
return of(this.open_popup);
}
}
app/src/app/audience-creator/audience-creator.component.ts
import {Stuff} from "@angular/core";
@Component({
selector: 'audience-creator',
templateUrl: 'audience-creator.html'
})
export class AudienceCreatorComponent implements AfterViewInit, OnInit {
public popup_is_open = false;
@Input()
audience_creator_service;
ngOnInit() {
this.audience_creator_service.popupIsOpen().subscribe(
popup_is_open => this.popup_is_open = popup_is_open
);
}
}
app/src/app/audience-creator/audience-creator.html
--> {{ this.popup_is_open }} variable is always false.
doesn't work
{{ this.popup_is_open }}
PS: just tried to hack the function directly into the template and it works so there must be something wrong with the way im binding the component variable??
{{ audience_creator_service.popupIsOpen().value }}
@Injectable()
export class AudienceCreatorService {
constructor(private http: HttpClient) {}
public open_popup = false
private isOpen: BehaviorSubject<boolean> = new BehaviorSubject(false);
public toggleCreatorPopup() {
this.open_popup = !this.open_popup;
this.isOpen.next(this.open_popup);
}
popupIsOpen(): Observable<any> {
return this.isOpen.asObservable();
}
}
这篇关于如何在 Angular 6 中观察服务变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!