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).
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()
}
}
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.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…