Angular 角度：监听并显示我在服务中获得的数据

我有一个组件（research field+button），它使用服务（API调用）从API获取一些数据。现在我想显示来自其他组件（结果组件）的这些数据

search.service.ts

getData(type){
  return this.http.post(`http://localhost/${type}`, params, {headers: headers}).pipe(
  .map(
    (response: Response) => {
      const data = response.json();
      return data;
     }
   ));
}

dataUpdated = new EventEmitter<{}>();

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Headers，Response}；
进口“rxjs/Rx”；
@可注射（）
导出类搜索服务{
构造函数（私有http:http）{}
searchOffer（类型：字符串，参数：{}）{
const headers=新的头（{'Access-Control-Allow-Origin'：'*'，'Content-Type'：'application/json'}）；
返回this.http.post(`http://localhost/${type}`，参数，{headers:headers}）
.地图(
（回复：回复）=>{
const data=response.json（）；
返回数据；
}
);
}
}

试着这样做：

服务台

getData(type){
  return this.http.post(`http://localhost/${type}`, params, {headers: headers}).pipe(
  .map(
    (response: Response) => {
      const data = response.json();
      return data;
     }
   ));
}

dataUpdated = new EventEmitter<{}>();

组件技术

constructor(private service: YourServiceClass)

  this.service.getData(type)
        .subscribe((resp: any) => {
            this.data = resp
        }, error => {
  });

this.searchService.searchOffer('search', params).subscribe(
  (response) => { 
      console.log(response);
      this.data = response;
      this.searchService.dataUpdated.emit(this.data); 
  },(error) => console.log(error)
);

constructor(private searchService: SearchService) {
this.searchService.dataUpdated.subscribe(
  (data: {}) => console.log(data)
);}

.html

---

您可以从父组件订阅服务，并将数据传递给子组件以显示为输入。 在子组件中实现

OnChanges

，以便在输入发生更改时知道

<app-search (onSearch)="searchResults = $event"></app-search>
<app-result [data]="searchResults"><app-search>

搜索.component.ts：

this.searchService.searchOffer('search', params).subscribe(
    (response) => { 
        console.log(response);
        this.data = response; 
    },(error) => console.log(error)
);

@Input('data') result : any

ngOnChanges() {
    console.log('Data changed')
    // Call your custom function
}

{{result|json}}

search.component.html：

<app-child [data]="data"></app-child>

result.component.html：

this.searchService.searchOffer('search', params).subscribe(
    (response) => { 
        console.log(response);
        this.data = response; 
    },(error) => console.log(error)
);

@Input('data') result : any

ngOnChanges() {
    console.log('Data changed')
    // Call your custom function
}

{{result|json}}

---

演示：

在服务中使用行为主体：

private data$ = new BehaviorSubject<any>();
public _data$ = this.data$.asObservable();


searchOffer(type: string, params: {}) {
 return this.http.post(`http://localhost/${type}`, params, {headers: headers})
  .map(
   (response: Response) => {
    const data = response.json();

    // store data here
    this.data$.next(data);
    return data;
   }
  );
}

---

每次您可以使用API时，订阅_data$的组件将收到新数据

您需要订阅组件中的http.post方法。 Adrita的解决方案很好，但：

• 如果您订阅了组件，请不要忘记取消订阅函数

另一种方法是使用异步管道将可观察的订阅到模板中：

组件技术

let datas: Observable<any>;  
constructor(private service: YourServiceClass) { // inject your service into the constructor
   this.datas = service.getData(); //reference to your service
}

let data:可观察以避免内存泄漏
您可以使组件代码更加清晰，特别是当数据需要由视图处理时
您可以在父组件中使用应用程序搜索和应用程序结果组件。在应用程序搜索组件中输入输出，并在搜索完成后返回数据。然后在结果组件中使用响应。在父组件中，需要定义searchResults变量。在结果组件中，使用ngOnChange angular lifecycle钩子捕捉数据输入内容更改的时间

<app-search (onSearch)="searchResults = $event"></app-search>
<app-result [data]="searchResults"><app-search>

首先，感谢大家抽出时间！我完全被卡住了。我想我已经找到了我的案例的正确答案：

首先，我在search.service.ts中添加了一个EventEmitter

getData(type){
  return this.http.post(`http://localhost/${type}`, params, {headers: headers}).pipe(
  .map(
    (response: Response) => {
      const data = response.json();
      return data;
     }
   ));
}

dataUpdated = new EventEmitter<{}>();

最后我在result.component.ts中订阅了我的事件

constructor(private service: YourServiceClass)

  this.service.getData(type)
        .subscribe((resp: any) => {
            this.data = resp
        }, error => {
  });

this.searchService.searchOffer('search', params).subscribe(
  (response) => { 
      console.log(response);
      this.data = response;
      this.searchService.dataUpdated.emit(this.data); 
  },(error) => console.log(error)
);

constructor(private searchService: SearchService) {
this.searchService.dataUpdated.subscribe(
  (data: {}) => console.log(data)
);}

使用angular
service
模块将数据从一个组件传递到另一个组件，并使用
observable
观察更改。您应该向search service类中添加一个公共/私有成员，以便跨组件共享。和每个组件中的访问器描述符，以对状态更改做出反应。这样做可以防止过时的数据。不要只使用可观察/主题解决方案。使用getter绑定到公共服务成员，以便对状态更改作出反应！例如：get search（）{return this.searchService.searchResult；//public member}我认为问题在于我的html绑定到了另一个组件。所以component.ts获取数据，但我想在result.html中显示。我会试试的，我觉得很接近，但我不想让我的结果成为我搜索的结果。那么我如何将数据传递给结果呢？@Unpuzz我相信您还有另一个父组件，其中搜索和结果组件是子组件。在这种情况下，当您单击search组件中的按钮时，将向父级触发一个事件，您可以在其中查询数据。此数据将在结果组件中自动更新。@Unpuzz我已更新了演示。搜索组件触发一个事件，传递用于搜索的字符串。您可以使用该字符串从父级查询数据，也可以将该字符串传递给子级本身并从那里进行查询。