角度问题-尝试从组件中的服务访问变量

Question

抱歉，我对打字稿非常陌生。我有两个组成部分和一项服务。一个组件使用后端API检索一些要显示在kendo-combobox中的数字。已经实现了一个搜索按钮，该按钮将在组合框中获取选定的编号并进行另一个API调用。然后，我的第二个组件应该在kendo-grid中显示第二个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个服务实例的方法。