如何在另一个组件中异步调用此服务函数？角11

Question

我有一个异步函数getIdentByInfo，在控制台中，如果我将它记录在这个函数中，就会得到正确的输出。当我在另一个组件中调用它时，它就不工作了，我只得到“未定义”。我知道这与蜂群同步和承诺有关，但我不知道如何解决我的问题。我需要在另一个组件中填充来自http请求的属性的模型类，以便将它们发送到另一个服务

import { EventEmitter, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IdentModel } from "../models/identmodel.model";
import { IdentteilComponent } from "../pages/identteil/identteil.component";

@Injectable({
  providedIn: 'root',
})
export class InfoWebservice {
  url = 'http://localhost:4201';
  ident: IdentModel[];


  constructor(private http: HttpClient) { }

  // promise vom typ IdentModel zurückgeben
  getIdentByInfo(id: string, vwk: string) {
    this.http.get(this.url).toPromise().then(data => {
      for (let i in data){
        this.ident.push(data[i])
        if ( this.ident[i].identNr == id && this.ident[i].vwk == vwk){
          return this.ident[i];
        }
      }
    });
}
}

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { InfoWebservice } from '../../webservices/info.webservice'
import { ImageWebservice } from '../../webservices/image.webservice'
import { IdentModel } from "../../models/identmodel.model";

@Component({
  selector: 'app-identteil',
  templateUrl: './identteil.component.html',
  styleUrls: ['./identteil.component.scss']
})
export class IdentteilComponent implements OnInit {

  ident = [];
  identNr:string;
  vwk:string;
  imgFrontLink:string;
  imgBackLink:string;

  constructor(private router: Router, private service: InfoWebservice, private image: ImageWebservice) {  }

  getIdentNr() : string  {
    var split = this.router.url.split("/");
    this.identNr = split[2];
    return this.identNr;
  }

  //return type is STRING
  getVwk()  {
    // output von window.location.host = repapp-maw.dbl.de
    // var splitHost = window.location.host.split(".");
    var splitHost = 'repapp-maw';
    var splitV = splitHost.split("-");
    this.vwk = splitV[1];
    return this.vwk;
  }

   callInfoService = async () => {
    return await this.service.getIdentByInfo(this.getIdentNr(), this.getVwk());
  }

  ngOnInit() {
    console.log(this.callInfoService());
  }
}

Answer 1

当你使用angular时，最好不要使用Await/Promise。Angular有一个内置的RX-JS库，它有很多超级棒的功能，你可以使用。

例如，在您的情况下，您可以这样做：

// Your Service File can make use of 'Behavior Subject' 
// Please read more about it here: https://www.learnrxjs.io/learn-rxjs/subjects/behaviorsubject

import { EventEmitter, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IdentModel } from "../models/identmodel.model";
import { IdentteilComponent } from "../pages/identteil/identteil.component";

@Injectable({
  providedIn: 'root',
})
export class InfoWebservice {
  url = 'http://localhost:4201';
  ident: IdentModel[];

  initialIdentValues: IdentModel = [];

  private identSource: BehaviorSubject<IdentModel[]> = new BehaviorSubject<IdentModel[]>(this.initialIdentValues);

  public identValuesObs$: Observable<IdentModel[]> = this.identSource.asObservable();
 
 // Create a method to set the values in component-1
 setIdentValues(identValues: IdentModel[]) {
   this.identSource.next(identValues);
 }
 
 // Create a method to return values in component-2 or any component
 returnIdentValues() {
  return this.identValuesObs$;
 }
  

  constructor(private http: HttpClient) { }

  // Change your service call to this:
  getIdentByInfo(id: string, vwk: string): Observable<any> {
    return this.http.get(this.url);
  }
}

现在，在您的组件-1中，您要设置此identValues的值：

// Component-1

constructor(private infoWebService: InfoWebService){}


// Create a method where you get the values

someMethod() {
  // Call the API method here and subscribe and then set the values
  this.infoWebService.getIdentInfoById(id, vwk).subscribe((data: any) => {
     // Your logic goes here ANDD
    if (data) {
      for (let i in data){
        this.ident.push(data[i])
        let localIdentsWithRequiredLogic = [];
        if ( this.ident[i].identNr == id && this.ident[i].vwk == vwk){
          localIdentsWithRequiredLogic.push(this.ident[i]);
        }

          // THIS IS IMPORTANT
          this.infoWebService.setIdentValues(localIdentsWithRequiredLogic);
      }
    }
  })
}

然后在component-2或任何您想要的组件中，您可以使用returnIdentValues方法检索它，如下所示：

// In component-2

inSomeMethodWhereYouRequireIdentValues() {
  this.infoWebService.returnIdentValues().subscribe(data => {
     console.log(data) // this is data that you set in component one  
  })
}