在Angular（2/4 +）中存儲和提供XHR'd數據給多個組件

我有一個後端，可以從中獲取'Mission'對象。我有一個名爲MissionService的類。在Angular（2/4 +）中存儲和提供XHR'd數據給多個組件

的angular.io英雄教程暗示MissionService應該有一個getMissions方法：

getMissions(): Promise<Mission[]> { 
    return this.http.get(this.missionsUrl) 
     .toPromise() 
     .then(function(response) { 
      return response.json() as Mission[] 
     }) 
     .catch(this.handleError); 
}

我有一個要訪問我的任務的多個組件。該angular.io教程似乎表明我應該在它們的構造導入MissionService，並做到：

export class MissionsComponent implements OnInit { 

    missions: Mission[]; 

    constructor(
     private missionService: MissionService 
    ){} 

    getMissions(): void { 
     this.missionService.getMissions() 
      .then(missions => { 
       this.missions = missions; 
       this.doSomething(); 
     }); 
    } 

    ngOnInit(): void { 
     this.getMissions(); 
    } 
}

我現在面臨的問題是，這意味着，我想用我的任務中的每個組件，兩端它有自己的this.missions實例，這與其他組件的this.missions可能不同。這也意味着我需要等待每次我想訪問組件中的任務時完成異步調用。這也意味着我需要在每個組件中調用getMissions（）。

那麼，是不是建議的方法是一個很糟糕的？

擁有一個單一的全球this.missions字段不是更好嗎？這樣，我可以在需要時以編程方式更新我的任務（例如用戶單擊刷新按鈕）。

我應該怎麼做呢？

來源

2017-08-31 SuperMrBlob

角度服務本質上是單例，因此您可以使用其他數據服務來共享必須在組件之間共享的數據。數據服務通常具有getter和setter methods.ie有一個服務，將調用http方法，然後調用數據服務以在組件之間共享數據，如果您不希望單獨的http調用獲取數據。

例如，

數據服務

import { Injectable } from '@angular/core'; 

@Injectable() 
export class UrlHistoryService { 
    private urlHistory: string; 

    constructor() { 
     this.urlHistory = ""; 
    } 

    public setUrlHistoryObj(val: string): void { 
     this.urlHistory = val; 
    } 

    public getUrlHistoryObj(): string { 
     return this.urlHistory; 
    } 

}

組件1

import { Component } from '@angular/core'; 
import { UrlHistoryService } from '../shared/service/url-history-store.service'; 

@Component({ 
    selector: 'search-movie-list-producer', 
    templateUrl: '../../Scripts/app/search-movies/search-movie-list.component.html' 
}) 

export class SearchMovieListProducerComponent { 
    constructor(
     private urlHistoryService: UrlHistoryService) { 

     this.urlHistoryService.setUrlHistoryObj("/movie/searchMovie"); 
    } 
}

和組件2

import { Component } from '@angular/core'; 
import { UrlHistoryService } from '../shared/service/url-history-store.service'; 

@Component({ 
    selector: 'search-movie-list-b', 
    templateUrl: '../../Scripts/app/search-movies/search-movie-list.component.html' 
}) 

export class SearchMovieListConsumerComponent { 
    backUrl: string; 

    constructor(
     private urlHistoryService: UrlHistoryService) { 

     this.backUrl = this.urlHistoryService.getUrlHistoryObj(); 
    } 
}

。在你的CAS e在組件中創建一個http cal並調用數據服務來設置數據並在其他組件中使用該服務來獲取共享數據。您可以閱讀關於此的更多信息here

來源

2017-08-31 06:22:41

在Angular（2/4 +）中存儲和提供XHR'd數據給多個組件

回答

相關問題