Angular 当另一个组件发出POST或PUT请求时检测数据更改

我主要使用angular2，我有两个组件，第一个负责在我的页面上显示来自服务器的数据，第二个是弹出的ngmodal，负责执行POST和PUT请求以保存数据

这里的问题是，当我更改或添加数据时，它不会自动显示在我的视图中

有人知道如何让组件A知道组件B所做的更改吗？谢谢

如何获取数据组件A：

this.service.getData(this.url)
  .subscribe(data => {
    this.data = data;
    console.log(this.data);
  },
  err => { console.log('__error__') },
  () => { console.log('Success') }
  );

我如何发布数据组件B：

add(content: string): void {
if (!content) { return; }
this.service.create(content, this.url)}

我的服务。获取数据：

getData(url:string): Observable<Object[]> {
return this.http.get(url)
  .map(res => res.json())
  .catch(this.handleError);}

My service.create post示例：

create(content: string, url:string): Observable<Object> {
    return this.http
        .post(url, JSON.stringify({ content: content }), { headers: this.headers})
        .map(res => res.json())
        .catch(this.handleError);}

---

我认为您需要的是跟踪服务中某个主题中数据的更改。然后，当使用create方法进行更改时，可以更新数据的新状态

然后，您可以通过订阅任何组件来访问该数据。下面是这种体系结构的一个示例：

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

@Component({
  selector: 'component-a',
  template: `
    <div>data</div>
  `
})

export class ComponentAComponent implements OnInit {
  constructor(private service: ExampleService) { }
  url: string;
  data: any;

  ngOnInit() {
    this.service.data.subscribe(data => this.data = data);
  }


}

@Component({
  selector: 'component-b',
  templateUrl: 'component-a.component.html'
})

export class ComponentBComponent implements OnInit {
  constructor(private service: ExampleService) { }

  ngOnInit() { }

  add(content: string): void {
    if (!content) { return; }
    this.service.create(content, this.url)
  }

}

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable, Subject } from 'rxjs';

@Injectable()
export class ExampleService {
  data: Subject<any> = new Subject<any>();

  constructor(private http: Http) { }

  create(content: string, url:string): Observable<Object> {
    return this.http
        .post(url, JSON.stringify({ content: content }), { headers: this.headers})
        .map(res => res.json())
        .do(data => this.data.next(data) )
        .catch(this.handleError);}
}

请注意，Subject没有初始值，一旦您将create方法和it.nextdata调用到Subject中，它就会开始发出值

你可以找到更多

推送通知和套接字

---

或者，如果您希望跟踪服务器上的数据，并收到发生在该数据上的任何更改的通知，则可以使用套接字查找推送通知。这需要在您的服务器上设置，在本例中可能不是您所说的。

您在哪里调用此服务？使用Observable并使这些需要通知的类订阅该Observable。从包含http POST的service.ts文件中，我将它们命名为getData并创建@TheDisticator