Question

在我的角度项目中，我有以下设置：

API.ts ：用于获取数据的API函数

...
export class dataAPI {
   info: any = null;

   getDataFromAPI(name){
     this.http.get(name)...
       .subscribe(data =>{
          this.info = data;  //This will have returned data
       }
   }  
}

Main.ts ：使用API函数的主页ts文件

  import { dataAPI }  from '../API.ts';

  @Component({
     templateUrl: 'main_page.html'
  }) 

  export class mainPage{      
      returnedData: any;

      constructor(public myAPI: dataAPI){};

      ngOnInit(){
          this.returnedData = this.myAPI.getDataFromAPI('steve'); //????
      }        
  }

main_page.html ：需要显示API函数返回的数据

 <div class="main" *ngIf="returnedData">
     {{returnedData}}
 </div>

问题

从API.ts文件中，this.info需要以某种方式传递到main.ts。我该怎么做呢？任何帮助将不胜感激！

Answer 1

从这里开始可能会有所帮助：https://angular.io/guide/http

请注意，Angular文档中的示例代码尚未显示使用服务进行Http调用的“最佳实践”。但它确实解释了http如何工作并为您的代码返回一个observable。

以下是返回产品的示例服务。您可以根据自己的需要进行调整：

import { Component, OnInit } from '@angular/core';

import { IProduct } from './product';
import { ProductService } from './product.service';

@Component({
    templateUrl: './product-list.component.html'
})
export class ProductListComponent implements OnInit {
    products: IProduct[] = [];
    errorMessage = '';

    constructor(private _productService: ProductService) {

    }

    ngOnInit(): void {
        this._productService.getProducts()
                .subscribe(products => this.products = products;,
                           error => this.errorMessage = <any>error);
    }
}

以下是调用服务，接收数据的组件代码：

{{1}}

Answer 2

选项1

我会做这样的事情

getDataFromAPI(name){
   //do not subscribe in this service! Return the observable.
    return this.http.get(name)...

   }

在mainPage

中

export class mainPage{      
      returnedData: any;

      constructor(public myAPI: dataAPI){};

      ngOnInit(){
         this.myAPI.getDataFromAPI('steve')
          .subscribe( data=>{
             this.returnedData = data; //SUBSCRIBE HERE
           }); 
      }        
  }

选项2 与选项1几乎相同，但使用像这样的异步管道

export class mainPage{      
      returnedData$ : Observable<any>;

      constructor(public myAPI: dataAPI){};

      ngOnInit(){
         this.returnedData$ = this.myAPI.getDataFromAPI('steve');
      }        
  }

在你的模板中

<div class="main">
     {{ returnedData$ | async)}}
 </div>

选项3 这是另一种选择，也是我不推荐的。由于您将服务声明为公共服务，因此您也可以直接在模板中使用它。

 <div class="main" *ngIf="myAPI.info">
    {{returnedData$ | async}}
 </div>

并在您的服务中声明您的info是公开的。

角度函数返回值

2 个答案: