Question

我是角度2的新手，有可能我不明白可观察力的力量。我创建了一个使用rxjs提供REST调用的简单服务：

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

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


@Injectable()
export class DataService {


  constructor(private http: Http) { }



  postFoo(){

    this.http.get('http://localhost:8080/Sample')
      .map(res=>res.json())

      .subscribe(

        res=>console.log(res)

      );



  }

}

我以这种方式在我的组件中调用了这个方法：

ngOnInit(){

    this._dataService.postFoo();

  }

这一切都很好。现在我想找到一种方法，每次数据发生变化时，组件都会重新调用此方法。我读了一些关于.distinctUntilChanged可观察方法的内容，但我不知道这是不是一个好方法。如果问题不好或者我没有很好地解释我的问题，我很抱歉。

此致

Answer 1

从官方网站请求服务如下：

@Injectable()
export class DataService {


  constructor(private http: Http) { }


  postFoo(){

    return this.http.post('http://localhost:8080/Sample')
      .map(this.parseData)

  }

   getFoo(){

      return this.http.get('http://localhost:8080/Sample')
      .map(this.parseData)

  }
  parseData(res: any): void {
      let response = res.json();
      return response;
  }

}

进入您的组件：

ngOnInit(){
    this.displayFoo();
}

displayFoo() {
    this._dataService.getFoo().subscribe(
         (response) => {
             // display response
         }
    );
}

addFoo() {
     this._dataService.postFoo().subscribe(
         (response) => {
             this.displayFoo();
         }
    );
}

在这里，我创建了一个名为addFoo的方法，它将从您的服务中执行.postFoo()。假设您有一个添加项目的按钮

<button (click)="addFoo()">Add item</button>

每次点击此按钮，它都会调用component方法addFoo并执行postFoo()。完成postFoo()后，它会执行getFoo()（此处为displayFoo()），您的数据将会更新！

希望这个答案可以帮到你！

此致

更改检测休息调用Angular 2

1 个答案: