1

我想构建一个 Angular 4 应用程序，我可以在其中从数据库中搜索用户并使用我在不同路线上找到的人的信息。我目前的问题是，如果我通过服务加载一些数据，更改路线并返回，数据会再次加载。

我的服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';

@Injectable()
export class GlobalDataService {
cachedData: Observable<any>;

getData() {
    if (this.cachedData) {
      console.log('cache data found');
      return Observable.of(this.cachedData);
    } else {
      console.log('cache data NOT found');
      return this.http.get('https://56e05c3213da80110013eba3.mockapi.io/api/todos')
            .map(res => res.json())
            .do((data) => {
              this.cachedData = data;
            })
        .share();
    }
  }

我的组件：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators} from '@angular/forms';
import { Http } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/mergeMap';
import 'rxjs/add/operator/map';
import { GlobalDataService } from '../../services/global-data.service';
@Component({
   selector: 'app-dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.css'],
   providers: [GlobalDataService]
})
export class DashboardComponent implements OnInit {
   todos: Observable<any[]>;
   constructor(private globalDataService: GlobalDataService) { }
   ngOnInit() {
      this.globalDataService.getData().subscribe(
        (resp) => {
            this.todos = resp;
        }
    );
}}

当我运行应用程序时，我得到 console.log 'NOT found' 并且数据被加载，正如它应该的那样，但是当我改变路线并切换回来时，它再次被加载，这是不正确的。

我希望你能帮助我提供一个完整的工作示例，所以我可以看看代码。也许我错过了一些东西。

如果您需要更多信息，请随时询问。

4

1 回答 1

3

您是否多次提供该服务？您应该只注册一次服务。

我在您的仪表板组件中看到它：

providers: [GlobalDataService]

您在任何其他组件或模块中是否有这样的列表？

要共享一项服务，它应该只注册一次：

  • 要么在组件树的根部（比如 app 组件）
  • 或在模块中而不是在组件中。

如果您多次注册它，它将无法作为单例运行，并且您将无法获得共享数据。

于 2017-09-28T07:55:22.753 回答