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
    });
}

这很好用，并且按照期望显示了括号内的计数。但是问题是，当我从另一个组件中删除一个请求时，nav-menu.component中的count变量不会更新，因此我必须刷新站点才能再次获得刷新的计数。所以我的问题是，有什么办法，更改后计数会自动刷新吗？

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

以便每当数据更改时它将调用服务方法并返回计数

更改后计数未更新

2 个答案: