New subscriptions always returning intial value instead of current value

I have a relatively simple Angular app using services to pass values between my components. The problem I am running into is when I go to a new route and load a component, subscribe to a service, it is always returning the intial value of instead of teh current value.

The main app.component has a component for a menu and then a router-outlet to load components based on the route when the user clicks a menu item. I have a service that is subscribed to and updates the current selected menu item in the menu component. The other components subscribe to the same service to get the current menu item, but they always just get the initial value, not the current value when subscribing to the service. The subscription in the menu component is always updated corectly and gets the correct values.

menu component:


@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss'],
providers: [MenuDatabase, NavigationService],
standalone: false
})
export class MenuComponent implements OnInit {

@Input() treeControl = new NestedTreeControl<MenuItem>(node => {
return (node.models) ? node.models : node.actions;
});

public activeItem: MenuItem | undefined;
public versionList: Version[] = [];
public menuItemList: MenuItem[] = [];
public currentVersion: string = '';
public isSearching: boolean = false;
public searchForm = new UntypedFormGroup({ search: new UntypedFormControl('') });

hasChild = (_: number, node: MenuItem) =>
(!!node.models && node.models.length > 0) ||
(!!node.actions && node.actions.length > 0);

dataSource = new MatTreeNestedDataSource<MenuItem>();

constructor(
public router: Router,
public menuService: MenuService,
private navigationService: NavigationService,
private database: MenuDatabase,
){
navigationService.activeMenuItem$.subscribe(
item => {
this.activeItem = item;
}
)
}

ngOnInit(): void {

}

navigate(menuItem: MenuItem) {
if(menuItem.models)
this.router.navigate([`${this.currentVersion}/module/${menuItem.code}`], { state: { ep: menuItem } });
if(menuItem.actions)
this.router.navigate([`${this.currentVersion}/model/${menuItem.code}`], { state: { ep: menuItem } });
if(!menuItem.actions && !menuItem.models)
this.router.navigate([`${this.currentVersion}/action/${menuItem.code}`], { state: { ep: menuItem } });
this.navigationService.setActiveMenuItem(menuItem)
}

navigationService:


@Injectable({
providedIn: 'root'
})
export class NavigationService {

private defaultItem = {
title: "Home",
code: "home"
}
// Observable string sources
private activeMenuItemSource = new BehaviorSubject<MenuItem>(this.defaultItem);

// Observable string streams
activeMenuItem$ = this.activeMenuItemSource.asObservable();

constructor(){
}

// Service message commands
setActiveMenuItem(activeItem: MenuItem) {
console.log("from: " + this.activeMenuItemSource.getValue().title + " | to: " + activeItem.title)
this.activeMenuItemSource.next(activeItem);
}

The console.log in theh service always shows what I would expect when the setActiveMenuItem() method is called from the menu component.

Component loaded when navigate() is called:


@Component({
selector: 'app-action-page',
templateUrl: './action-page.component.html',
styleUrls: ['./action-page.component.scss'],
standalone: false
})
export class ActionPageComponent implements OnInit {

@Input() treeControl = new NestedTreeControl<MenuItem>(node => {
return (node.models) ? node.models : node.actions;
});

@Input() menuItem: MenuItem;

constructor(
private activatedRoute: ActivatedRoute,
private actionService: ActionService,
private navigationService: NavigationService
) {
};


ngOnInit(): void {
this.activatedRoute.url.subscribe(seg => {
this.version = seg[0].path || '';
this.level = seg[1].path || '';
this.itemCode = seg[2].path || '';

this.actionService.getAction(this.itemCode)
.subscribe(data => {
this.item = data
})

});

this.navigationService.activeMenuItem$.subscribe(
item => {
console.log(item)
}
)
}

The console log in the ActionPageComponent always shows 'Home' (the inital value for the BehaviorSubject Observable)

How do I get the components loaded in the router-output to subscribe to the service while rtaining the current values from that service?

Continue reading...