각도 4 모범 사례 : 서비스를 통해 글로벌 데이터로드 및 저장

Question

나는 데이터베이스에서 사용자를 검색하고 다른 경로에서 찾은 사람의 정보를 사용할 수있는 각도 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 '을 (를) 찾을 수 없습니다'와 데이터가로드됩니다를 얻을, 그것의 가정 된대로,하지만 내가 경로를 변경하고 다시 스위치, 그로드 된 다시 올바른 맞지 않습니다.

코드를 살펴볼 수 있도록 전체 예제가 도움이 되었기를 바랍니다. 어쩌면 나는 뭔가를 놓친다.

자세한 정보가 필요하면 언제든지 문의하십시오.

Answer 1

여러 번 서비스를 제공합니까? 한 번만 서비스를 등록해야합니다.

내가 대시 보드 구성 요소에 참조 :

providers: [GlobalDataService] 

은 당신이 다른 구성 요소 또는 모듈에 다음과 같이 나와 있습니까?

(예 : 응용 프로그램 구성 요소) 또는 대신 구성 요소의 모듈의 구성 요소 트리의 루트에

• 다음 중 하나를
  은 한 번만 등록해야 서비스를 공유 할 수 있습니다.

여러 번 등록하면 싱글 톤으로 작동하지 않으며 공유 데이터를 얻지 못합니다.