Question

主要是，我正在使用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)}

我的服务.get数据：

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

我的service.create（发布示例）：

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);}

Answer 1

我认为您需要跟踪服务中主题中数据的更改。然后，当您使用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);}
}

请注意，主题没有初始值，一旦您调用create（）方法并将.next（数据）调用到主题中，它将开始发出值。

您可以找到更多information about subjects here.

推送通知和套接字

或者，如果您想跟踪服务器上的数据并收到有关其发生的任何更改的通知，您可能正在寻找使用套接字的推送通知。这需要在您的服务器上进行设置，在这种情况下可能不是您所说的。

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

1 个答案: