从另一个组件更新后,如何检测服务变量的变化? [英] How can I detect service variable change when updated from another component?
问题描述
我正在尝试从服务变量(isSidebarVisible
)获取更新的值,该服务变量通过单击事件(toggleSidebar
)不断由另一个组件(header
)进行更新.
I'm trying to get the updated value from a service variable (isSidebarVisible
) which is keeps on updated by another component (header
) with a click event (toggleSidebar
).
sidebar.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class SidebarService {
isSidebarVisible: boolean;
sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();
constructor() {
this.isSidebarVisible = false;
}
toggleSidebarVisibilty() {
this.isSidebarVisible = !this.isSidebarVisible
this.sidebarVisibilityChange.next(this.isSidebarVisible);
}
}
sidebar.component.ts
export class SidebarComponent implements OnInit {
asideVisible: boolean;
_asideSubscription: any;
constructor(private sidebarService: SidebarService) {
this.asideVisible = sidebarService.isSidebarVisible
this._asideSubscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
this.asideVisible = value
})
}
ngOnInit() {
}
}
header.component.ts(更新服务变量的位置)
export class HeaderComponent implements OnInit {
isSidebarVisible: boolean;
_subscription: any;
constructor(private sidebarService: SidebarService) {
this._subscription = sidebarService.sidebarVisibilityChange.subscribe((value) => {
this.isSidebarVisible = value
})
}
toggleSidebar() {
this.sidebarService.toggleSidebarVisibilty()
}
ngOnInit() {
}
}
当{{ isSidebarVisible }}
时,我可以在header.component.html
中看到服务变量值的变化,但是在sidebar.component.html
中,它总是打印默认值,并且从未听过更改.
I can see the service variable value change in header.component.html
when {{ isSidebarVisible }}
but In sidebar.component.html
it always prints the default value and never listened to the changes.
请帮助我解决此问题.
推荐答案
移动对服务的订阅,两个组件都可以访问该值.如果只需要一次值,则可以直接使用它(就像我在 sidebar.component 中所做的那样);如果您需要使用此值更新某些内容,则可以使用getter( header.component 中的示例).
Move subscription to the service, and both components can access this value. If you need value only once, you can use it directly (like I did in sidebar.component); If you need to update something with this value it you can use getter (example in header.component).
@Injectable()
export class SidebarService {
isSidebarVisible: boolean;
sidebarVisibilityChange: Subject<boolean> = new Subject<boolean>();
constructor() {
this.sidebarVisibilityChange.subscribe((value) => {
this.isSidebarVisible = value
});
}
toggleSidebarVisibility() {
this.sidebarVisibilityChange.next(!this.isSidebarVisible);
}
}
sidebar.component.ts
export class SidebarComponent {
asideVisible: boolean;
constructor(private sidebarService: SidebarService) {
this.asideVisible = sidebarService.isSidebarVisible;
}
}
header.component.ts
export class HeaderComponent {
constructor(private sidebarService: SidebarService) { }
get isSidebarVisible(): boolean {
return this.sidebarService.isSidebarVisible;
}
toggleSidebar() {
this.sidebarService.toggleSidebarVisibility()
}
}
您还可以在两个组件中的任意一个中订阅主题,并在其中获取值:
You can also subscribe to the subject in either/both components and get the value there:
this.sidebarService.sidebarVisibilityChange.subscribe(value => {...});
如果您想进一步了解主题,请此处
If you want to know more about Subjects take a look here.
这篇关于从另一个组件更新后,如何检测服务变量的变化?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!