Angular 問題 - 嘗試從組件中的服務訪問變量

Question

道歉我對 typescript 很陌生。 我有兩個組件和一個服務。 一個組件使用后端 API 檢索一些數字以顯示在劍道組合框中。 實現了一個搜索按鈕，該按鈕采用 combobox 中的選定號碼並進行另一個 API 調用。 然后，我的第二個組件應該在劍道網格中顯示第二個 API 調用的結果。

我的問題是我的第二個屏幕沒有記錄 API 的結果（我現在正在使用將 API 結果記錄到控制台）。

下面的代碼：

父組件：

import { BreadcrumbPath } from '../../shared/breadcrumb/model/breadcrumb-path';
import { BreadcrumbService } from '../../shared/breadcrumb/services/breadcrumb.service';
import { Observable, observable } from 'rxjs';
import { EngineMoveClient, Engine } from './../../api-clients/api';
import { map } from 'rxjs/operators';
import { CorrectEngineMoveFilterComponent } from '../correct-engine-move-filter/correct-engine-move-filter.component';
import { CorrectEngineMoveService } from '../correct-engine-move.service';
import { untilDestroyed } from 'ngx-take-until-destroy';

@Component({
  selector: 'app-correct-engine-move',
  templateUrl: './correct-engine-move.component.html'
})
export class CorrectEngineMoveComponent implements OnInit, OnDestroy {

  esnNumbers$: Observable<string[]>;

  @Input()
  engineInfo$ : Observable<{ EPN: string;
                 ESN: string;
                 ER: string;
                 DN: string;
                 DIN: string;
                 EL: string; }[]>;

  public selectedEsn;

  public tempEngineInfo$ = [];
  constructor(
    private breadcrumbService: BreadcrumbService,
    private engineMoveClient: EngineMoveClient,
    private correctEngineMoveService : CorrectEngineMoveService
  ) {
  }

  ngOnInit() {
    this.registerBreadCrumb();
  }

  ngAfterInit() {
    this.correctEngineMoveService.engineInfoSubject.subscribe( res => { this.tempEngineInfo$.push(res) 
      console.log(this.tempEngineInfo$) } )
  }
  ngOnChanges() {
  }

  ngOnDestroy() {}

  registerBreadCrumb(): void {
    const breadcrumb = BreadcrumbPath.correctEngineMoveDefaultItem;
    breadcrumb.path = null;

    this.breadcrumbService.setBreadcrumb(breadcrumb);
  }

  setSelectedESN(value) {
    this.selectedEsn = value;
  }

  public onBlur() { } // workaround for blur detection

  logCheck() {
    this.correctEngineMoveService.engineInfo$.subscribe( res => { this.tempEngineInfo$.push(res) 
      console.log(this.tempEngineInfo$) } )
  }
}

子組件：

import { Component, OnInit,OnDestroy } from '@angular/core';
import { FormStateService } from '../../core/services/form-state/form-state.service';
import { FormGroup, Validators, FormBuilder } from '@angular/forms';
import { DateValidator } from '../../validation/date-validator';
import { CorrectEngineMoveService } from '../correct-engine-move.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-correct-engine-move-filter',
  templateUrl: './correct-engine-move-filter.component.html',
  providers : [CorrectEngineMoveService] 
})
export class CorrectEngineMoveFilterComponent implements OnInit, OnDestroy {

  constructor( 
    private formBuilder: FormBuilder,
    private correctEngineMoveService: CorrectEngineMoveService
    ) { }

  engineMoveFilters: FormGroup;
  correctEngineMoveFilters: FormGroup;
  esnNumbers$ : Observable<string[]>;
  selectedEsn : string;

  ngOnInit() {
    this.buildForm();
    this.getESN();
  }

  ngOnDestroy() {
  }

  private getESNNumbers() {
    this.esnNumbers$ = this.correctEngineMoveService.getESN();
  }

  setSelectedESN(value) {
    this.selectedEsn = value;
  }

  loadInfoForESN() {
    this.correctEngineMoveService.setInfoFromESN(this.selectedEsn);
  }

  public onBlur() { } // workaround for blur detection

  private buildForm() {
      this.correctEngineMoveFilters = this.formBuilder.group({
          aircraftTailNumber: this.formBuilder.control(null, Validators.required)
      }, {
      });
  }
}

服務

import { Injectable, Output } from '@angular/core';
import * as moment from 'moment';
import { BehaviorSubject, Observable } from 'rxjs';
import { switchMap, tap, map } from 'rxjs/operators';
import { EngineMoveClient } from '../../app/api-clients/api';

import { CorrectEngineMoveComponent } from './correct-engine-move/correct-engine-move.component';

// This class holds methods that allow correct engine move componants
// to call Api's and transfer data between each other
@Injectable()
export class CorrectEngineMoveService {

    public engineInfoSubject = new BehaviorSubject<{ EPN: string;
        ESN: string;
        ER: string;
        DN: string;
        DIN: string;
        EL: string; }[]>( "" as any
        );



    @Output()
    engineInfo$ = this.engineInfoSubject.asObservable();

    constructor(
        private engineMoveClient: EngineMoveClient,
    ) {
    }

    public getESNNumbers() : Observable<string[]> {
        return this.engineMoveClient.getESN();
    }

    public setInfoFromESN(selectedEsn: string)
    {   
        let tempEngineInfo =  this.engineMoveClient.getEngine(selectedEsn).pipe(map(v => {
          return [
            {
                'EPN': v.EPN,
                'ESN': v.ESN,
                'ER': v.ER,
                'DN': v.DN,
                'DIN': v.DIN,
                'EL': v.EL
            }];
        }));
        tempEngineInfo.subscribe(a => {
            console.log(a)
            this.engineInfoSubject.next(a)

            this.engineInfo$ = this.engineInfoSubject.asObservable();
            this.engineInfo$.subscribe(a => console.log(a))         
        }
        )
    }
}

所以只是為了澄清我希望服務中的this.engineInfo$專門顯示在父組件中，

  logCheck() {
    this.correctEngineMoveService.engineInfo$.subscribe( res => {
      this.tempEngineInfo$.push(res) 
      console.log(this.tempEngineInfo$) 
    })
  }

任何幫助將不勝感激。

Answer 1

我認為問題在於，在面板組件和子組件中，您在構造函數中都有：-

    private correctEngineMoveService: CorrectEngineMoveService

這將在服務上創建 2 個實例。 您可以通過向服務構造函數添加控制台消息來檢查這一點。 因此，一個將調用服務器，另一個將被訂閱。

您需要重新編寫以找到擁有 1 個服務實例的方法。