Question

我有一个内置的角度2应用程序来从oracle db获取数据，并在视图中显示它，每当我在路径之间切换时，每次加载视图以从DB获取数据。如何才能使其仅获取一次数据，直到我单击某个控件来获取数据。

服务：

 getTaskDetails(taskId : Number): Promise<String[]> {
    this.heroesUrl='http://localhost:3007/getTaskDetails';
    return this.http.get(this.heroesUrl+"?taskId="+taskId)
               .toPromise()
               .then(function(response){
                  console.log("Test"+response.json());
                 return response.json();
               })
               .catch(this.handleError);
  }

组件：

  getHeroes(agentID : Number,filterDateFrom : String,filterDateTo : String): void {

    this.heroService
        .getTaskByDate(taskId)
        .then((dataGSD)=>
           this.dataGdsp = dataGSD
        );

查看：

<table *ngIf="dataGdsp" id="customers">
    <tr>
        <th>AGENT_ID</th>
        <th>TASK_ID</th>
        <th>PARENT_PROCESS_NAME</th>
        <th>INITIATION_POINT_NAME</th>
    </tr>
    <tr *ngFor="let d of dataGdsp; let i = index">
        <td>{{d.AGENT_ID }}</td>
        <td>{{d.BPM_INSTANCE_ID}}</td>
        <td>{{d.PARENT_PROCESS_NAME}}</td>
        <td>{{d.INITIATION_POINT_NAME}}</td>
    </tr>
</table>

Answer 1

除了链接的答案，您可以使用服务中的变量来存储提取的数据，并在getTasksDetail检查是否存在变量的值，如果不存在，则进行http请求

这样的事情：

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';

....

// type your data instead of using 'any'
private dataGdsp: any[]; // intentionally not initialized for our conditions
// instead of above you could initialize and check the length of array instead


getTasksDetail(taskId) {
  if(!this.dataGdsp) {
    this.heroesUrl='http://localhost:3007/getTaskDetails';
    return this.http.get(this.heroesUrl+"?taskId="+taskId)
      .map(res => {
        this.dataGdsp = res.json();
        return res.json();
      })
  } else {
     return Observable.of(this.dataGdsp)
  }
}

然后在你的组件中订阅：

ngOnInit() {
  // your service call should actually look like this (?)
  this.heroService.getTasksDetail(taskId)
    .subscribe((dataGSD)=> {
      this.dataGdsp = dataGSD;
    });
}

如果您想稍后更新该值，只需调用一个方法，即在服务中将新值设置为dataGdsp：

updateTasksDetail(taskId) {
  this.http.....
    .map(res => {
      this.dataGdsp = res.json();
      return res.json()
    })
}

Angular 2，如何在路由

1 个答案: