从另一个组件更新时如何检测服务变量更改? [英] How can I detect service variable change when updated from another component?

问题描述

我正在尝试从服务变量 (isSidebarVisible) 中获取更新的值，该变量由另一个组件 (header) 通过单击事件 (<代码>toggleSidebar).

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 }} 但在 sidebar.component.html 时，我可以在 header.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 => {...});

如果您想了解有关 Subjects 的更多信息，请查看此处.

If you want to know more about Subjects take a look here.

这篇关于从另一个组件更新时如何检测服务变量更改?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！