Счет не обновляется после изменений

Question

Я добавил пункт меню в шаблон .NET Core SPA по умолчанию nav-menu.component.html файл, подобный следующему:

<li [routerLinkActive]='["link-active"]'>
    <a [routerLink]='["/fetch-data"]' (click)='collapse()'>
        <span class='glyphicon glyphicon-th-list'></span> Requests ({{count}})
    </a>
</li>

Показывает количество запросов, полученных с сервера в круглых скобках. Я инициализировал счет в моем файле TS следующим образом:

export class NavMenuComponent {

count: number;

constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) {

var url = this.baseUrl + "api/request/TheCount/";
this.http.get<number>(url).subscribe(result => {
  this.count = result;
}, error => console.error(error));

}

И TheCount метод просто получает количество запросов от сервера, как это:

[HttpGet("TheCount")]
public async Task<IActionResult> TheCount()
{
    var count = await GetRequestsCount();

    return new JsonResult(count, new JsonSerializerSettings()
    {
        Formatting = Formatting.Indented
    });
}

Это работает просто отлично и показывает количество в круглых скобках в соответствии с ожиданиями. Но проблема в том, что когда я удаляю один из запросов из других компонентов, переменная count в nav-menu.component не обновляется, и поэтому мне нужно обновить сайт, чтобы снова получить обновленное количество. Итак, мой вопрос, есть ли способ, счет будет обновляться автоматически после изменений?

Answer 1

это образец шаблона

import { Injectable, EventEmitter } from '@angular/core';
                import { BehaviorSubject, Observable } from 'rxjs';
                import { HttpHeaders, HttpClient } from '@angular/common/http';

                @Injectable()
                export class CountService {

        count: number;

          public observalbleCount: BehaviorSubject<number>;


                  constructor(
                    protected httpClient: HttpClient) {
        this.count= 0;
                    this.observalbleCount = new BehaviorSubject<number>(this.count);
                  }

                  getCount(): Observable<number> {

return new Observable((observer) => {

this.httpClient.get<number>(url).subscribe(result => {
                        this.count = result 
                        this.setCount(result);
                        observer.next(result);
                      }, error => console.error(error));
                      });



                  }

                  public setCount(data: number) {
        this.count=data;
                    this.observalbleCount.next(data);
                  }

                }

Фактический компонент

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

import { CountService } from './';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class NavComponent implements OnDestroy {
    count: number;
    subscription: Subscription;

    constructor(private countService: CountService) {
        // subscribe to home component messages
        this.countService.GetCount().subscribe((data) => {
          this.count = data;
        });
this.subscription = this.countService.observalbleCount.subscribe((data) => {
          this.count = data;
        });
    }

    ngOnDestroy() {
        // unsubscribe to ensure no memory leaks
        this.subscription.unsubscribe();
    }
}

Answer 2

Предполагается, что вы удалите / добавите счетчик должен быть обновлен.

Вы добавляете свой код в сервис

 this.http.get<number>(url).subscribe(result => {
  this.count = result;
}, error => console.error(error));

}

затем используйте Subject или BehaviorSubject для конкретной переменной (счетчика) этой службы

, чтобы при изменении данных вызывался сервисный метод и возвращалось число