0

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

我的 service.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);}
4

1 回答 1

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

请注意，Subject 没有初始值，一旦您调用 create() 方法并将 .next(data) 调用到 Subject 中，它将开始发出值。

您可以在此处找到有关主题的更多信息。

推送通知和套接字

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

于 2017-05-19T11:45:44.473 回答