![](/img/trans.png)
[英]How to access a variable defined in service class from a component in Angular 9?
[英]Angular Issue - trying to Access a variable from a service in a component
道歉我对 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$)
})
}
任何帮助将不胜感激。
我认为问题在于,在面板组件和子组件中,您在构造函数中都有:-
private correctEngineMoveService: CorrectEngineMoveService
这将在服务上创建 2 个实例。 您可以通过向服务构造函数添加控制台消息来检查这一点。 因此,一个将调用服务器,另一个将被订阅。
您需要重新编写以找到拥有 1 个服务实例的方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.