Question

我目前正在学习Angular 5，而且我很难将数据从服务传递到组件。我将它整合到wordpress ..

这是我目前的代码：
的 orderers.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
    selector: 'app-orderer',
    templateUrl: './orderer.component.html',
    styleUrls: ['./orderer.component.css'] })


export class OrdererComponent implements OnInit {

o_manual:boolean = false;
orderers = [];

constructor(private http:HttpClient) { }

ngOnInit() {
    this.get_users();
}

get_users() {
    this.http.get('http://angular5.localhost/wp-admin/admin-ajax.php?action=orderers').subscribe( data => { 
        this.orderers = data;
    }
} }

如何将get_user（）传输到服务并返回数据并将其传递给组件？谢谢.. :)）

Answer 1

第1步 创建您的服务并将您的功能放在

中

get_users_from_service(): Observable<any> {   
   return this.http.get(...)     // You can also try to catch any exception here
}

第2步 在构造函数

中注入后，在组件中调用您的服务

get_users() {
   this.nameOfService.get_users_from_service().subscribe(data => {
      this.orderers = data;
   },
   error => {
       // Do something with error
   }
}

Answer 2

首先创建服务并复制get_users（）函数。每个http请求都返回一个Observable类型的Object，这是包含subscribe（）函数的对象，需要在get_users（）函数中返回它。类似的东西：

    @Injectable()
    export class SomeNameService {

      constructor(private http: HttpClient) {

      }

      get_users():Observable<any> {
        return this.http.get('http://angular5.localhost/wp-admin/admin-ajax.php?action=orderers');
    }
}

现在，在您的模块中，您需要在提供商下列出此服务

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [SomeNameService]
})

之后你需要像注入HttpClient一样将它注入你的组件，并订阅你的get_users（）函数。

constructor(private someService:SomeNameService) { }
ngOnInit(){
 this.someService.get_users().subscribe(data=>{
    this.orderers = data;
  });
}

顺便提一下angular.io https://angular.io/tutorial/toh-pt4

上有很多例子

希望这很有帮助

Angular5：将HttpClient响应从服务返回到Component？

2 个答案: