Question

我有一个包含多个组件的Angular应用程序，并向所有组件注入了单个服务。该服务包含与我的REST后端进行交互的方法。我试图做到这一点，所以当使用一个组件发出请求时，它会增加服务中的计数变量。但是，当我尝试从另一个组件访问该变量时，它将返回其原始值。

jwt.service.ts

import { catchError } from "rxjs/operators";
import { environment } from "../environments/environment";
import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

import { CookieService } from "ngx-cookie-service";

@Injectable({ providedIn: "root" })
export class JwtService {

  requests: number;

  constructor(
    private http: HttpClient,
    private cookieService: CookieService
  ) {
      this.requests = 0;
    }

  createJWT(id: string) {
    const url = `/${id}/token`;
    this.requests = this.requests++;
    return this.http
      .post(environment.apiUrl + url, this.cookieService.get('token'))
      .pipe(catchError(this.handleError(`createJWT id=${id}`)));
  }

  getRequests() {
    return this.requests;
  }

  verifyJWT(id: string, jwt: string) {
    ...
  }

  getActiveJWTs() {
    ...
  }

  revokeJWT(jwt: string) {
    ...
  }

  signIn(username: String, password: String) {
    ...
  }

  handleError<T>(operation = "operation", result?: T) {
    ...
  }
}

certificate-authority.component.ts

import { Component, OnInit } from '@angular/core';
import { interval } from 'rxjs';

import { JwtService } from '../jwt.service';

@Component({
  selector: 'app-certificate-authority',
  templateUrl: './certificate-authority.component.html',
  styleUrls: ['./certificate-authority.component.css']
})
export class CertificateAuthorityComponent implements OnInit {

  active: string[] = null;
  activeJWT = "";
  requests = 0;

  constructor(
    private jwtService: JwtService,
  ) {
      interval(5000).subscribe(val => this.checkUpdate());          
   }

  ngOnInit() {
    this.getActive();

  }

  getActive() {
    ...
  }

  revokeJWT() {
    ...
  }

  viewJWT(jwt: string) {
    this.activeJWT = jwt;
  }

  checkUpdate() {
    if (this.requests != this.jwtService.getRequests()) {
      this.requests++;
      this.getActive();
    }
  }
}

如果我从该组件访问x方法“ createJWT（）”，则它将在每个间隔正确返回x。但是，如果我按预期从另一个组件访问'createJWT（）'方法，则当前组件只会看到请求计数为0;

这使我相信，将jwt.service注入到的每个组件都将创建jwt.service的新实例。但这似乎不对。服务与组件的重点在于，服务可以包含与特定视图无关的任何内容。无论我从哪个组件访问“ createJWT（）”，我如何才能做到，我的证书颁发机构组件将返回正确数量的请求？

Answer 1

只有一项服务。但是您在组件中有一个计数器的副本，因此，增加服务的计数器不会自动增加每个组件中的副本。

此外，您的间隔会增加副本的值，而不是使用服务值初始化副本的值，并且您不会在初始化时初始化副本。

请勿创建副本，并显示存储在服务中的唯一，正确的值：

get requests() {
  return this.jwtService.getRequests();
}

Angular 6-服务中的变量未更新

1 个答案: