angular 4个最佳实践：通过服务加载全局数据并存储

Question

我想构建一个 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' 并且数据被加载，正如它应该的那样，但是当我改变路线并切换回来时，它再次加载，这是不正确的。

我希望你能帮助我提供一个完整的工作示例，这样我就可以看一下代码。也许我错过了什么。

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

Answer 1

你们有多次提供的服务吗？您应该只注册一次该服务。

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

providers: [GlobalDataService]

您是否在任何其他组件或模块中像这样列出它？

要共享一项服务，只需注册一次：

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

如果多次注册，将无法作为单例使用，您将无法获得共享数据。

angular 4个最佳实践：通过服务加载全局数据并存储

angular 4 best practice: load global data via service and store it

service

routing

shared-data

angular