Jak mogę wykryć zmianę zmiennej usługi po aktualizacji z innego komponentu? - kątowe, kątowe2-usługi

Próbuję uzyskać zaktualizowaną wartość ze zmiennej usługi (isSidebarVisible), który jest aktualizowany przez inny komponent (header) ze zdarzeniem kliknięcia (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 (gdzie zmienna usługi jest aktualizowana)

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() {

}
}

Widzę zmianę wartości zmiennej usługi header.component.html gdy {{ isSidebarVisible }} ale w sidebar.component.html zawsze drukuje wartość domyślną i nigdy nie słuchał zmian.

Proszę, pomóż mi to naprawić.

Odpowiedzi:

23 dla odpowiedzi № 1

Przenieś subskrypcję do usługi, a oba składniki będą miały dostęp do tej wartości. Jeśli potrzebujesz wartości tylko raz, możesz użyć jej bezpośrednio (tak jak ja sidebar.component); Jeśli potrzebujesz zaktualizować coś o tej wartości, możesz użyć gettera (przykład w header.component).

sidebar.service.ts:

@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()
}
}

Możesz także zasubskrybować ten temat w jednym lub obu komponentach i uzyskać tam wartość:

this.sidebarService.sidebarVisibilityChange.subscribe(value => {...});

Jeśli chcesz dowiedzieć się więcej o przedmiotach, spójrz tutaj.

---