Angular - 从组件更新服务的属性

Question

我有一个带有appName 属性的服务。当我的组件执行 POST 时，我试图将组件的名称传递给服务的 appName 属性，从而在服务中更新它，以便当服务稍后调用此属性时，它具有我从组件。

但是，我无法更新服务的 appName 属性 - 它与最初在服务中定义的一样：

error-logger.service.ts

  constructor(private http: HttpClient) { 

  };

    appName = "initialName";

//logError function fires on error from GlobalErrorHandlerService, logging errors and passing the new appName value from component.
    logError() {
    //below should log the new appName (from component), not the initial
    console.log("Application:" + this.appName);
    }

}

my-component.component.ts

import { Component, OnInit } from '@angular/core';
import { ErrorLoggerService } from '../../../core/services/error-logger.service';
import { Router, ActivatedRoute } from '@angular/router';

...

  constructor(
    private errorLoggerService: ErrorLoggerService,
    private route: ActivatedRoute,
    private router: Router
    ) {
      console.log("COMPONENT NAME: " + this.route.component.name);
    }



  ngOnInit() {
    this.errorLoggerService.appName = "NewAppName";
    this.errorLoggerService.postData(JSON.stringify(myData))
    .subscribe(
      data => console.warn(data),
      error => {throw error},
      () => console.log("empty")
    );
  }

global-error-handler.service.ts

import { Injectable, ErrorHandler, Injector } from '@angular/core';
import {ErrorLoggerService} from '../services/error-logger.service';
import { HttpErrorResponse } from '@angular/common/http';

// Global error handler for logging errors
@Injectable()
export class GlobalErrorHandlerService extends ErrorHandler {
    constructor(private injector : Injector) {


        super();
    }

    handleError(error: any) {
      let loggerService = this.injector.get(ErrorLoggerService);
      loggerService.logError(error)    
      .subscribe(
        data => console.warn(data),
        error => {throw error},
        () => console.log("empty")
      );

  }
}

如何从组件中正确更新服务的属性？要么我有一些根本性的错误，要么可能与我在error-logger.service.ts中所做的RXJS/自定义错误处理的异步性质有关。

Answer 1

我认为这段代码对你有用：

第一个'error-logger.service.ts'：

在

中转换你的appName

public appName = new BehaviorSubject<string>('initialName')

logError(error) {
   return appName.pipe(tap(appName => console.log(appName)))
   // or
   //return appName.pipe(switchMap(appName=> {
   //     console.log(appName)
   //     return of('{data}')
   // }))
}

第二个my-component.component.ts：

this.errorLoggerService.appName.next('otherName')

第三个 GlobalErrorHandlerService：

loggerService.logError(error)    
  .subscribe(
    appName => console.warn(appName),
    // or data => console.warn(data)
    error => {throw error},
    () => console.log("empty")
  );

我的想法有效，希望如此有效:)