Значение переменной не обновляется в сервисе

Question

Я построил следующий сервис:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
    url = 'api address';
    element_id;
  constructor(private http: HttpClient) { }
  public getMenus(){
    return this.http.get(this.url);
  }
  public getData(element_id){
    return this.http.get(this.url);
  }
  public change_val(element_id){
    console.log('This ' + element_id + " is in the service");
    this.element_id = element_id;
  }
}  

В сервисе отмечены две вещи:

1. Переменная element_id объявлена, но не задано никакого значения
2. Последняя функция, change_val (element_id) , изменяет значение element_id при запуске. Его определяют в сервисе, потому что он используется в других компонентах.

Служба совместно используется двумя компонентами, которые также используют element_id :

nav.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  menus;
  constructor(private api: ApiService){}
  ngOnInit(){
    this.api.getMenus().subscribe((data: any[]) => {
      //console.log(data);
      this.menus = data;
  });
  }
 public change_val(element_id){
    console.log("This " + element_id + " comes from nav.component")
    this.api.element_id = element_id
 }
}

и

content.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
  content;
  constructor(private api: ApiService) { }
  ngOnInit(){
    return this.api.getData(this.api.element_id).subscribe(res => {
    this.content = res[this.api.element_id];
  });
}
}

Функция change_val () запущена и element_id получает значение простым (щелчком):

nav.component. html

<div *ngFor="let menu of menus; index as id">
    <ul>
        <li><button (click)="change_val(id)">{{menu['course-lesson-name']}}</button></li>
    </ul>
</div>

Вот моя проблема :

element_id работает нормально и имеет правильное значение в nav.component.ts , но не передается (не обновляется) в api.service .ts . Это плохо, потому что мешает обновлению содержимого из компонента содержимого.

Чего мне не хватает? Я предполагаю, что у меня, вероятно, где-то неправильная ссылка, но нужен другой набор глаз.

Answer 1

in nav.component.ts почему бы не вызывать метод из сервиса вместо простого изменения значения. тогда сервис

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styleUrls: ['./nav.component.css']
})
export class NavComponent implements OnInit {
  menus;
  constructor(private api: ApiService){}
  ngOnInit(){
    this.api.getMenus().subscribe((data: any[]) => {
      //console.log(data);
      this.menus = data;
  });
  }
 public change_val(element_id){
    console.log("This " + element_id + " comes from nav.component")
    this.api.change_val(element_id)
 }
}