Question

我有一个后端，我可以获取＆＃39; Mission＆＃39;来自的对象。我有一个名为MissionService的课程。

angular.io hero教程建议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字段会不会更好？这样，我可以在需要时以编程方式更新我的任务（例如，用户点击刷新按钮）。

我该怎么做呢？

Answer 1

Angular服务本质上是单例，因此您可以使用其他数据服务来共享必须在组件之间共享的数据。数据服务通常具有getter和setter方法。如果您不希望单独的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();
    }
}

。在组件的情况下，创建一个http cal并调用数据服务来设置数据，并在其他组件中使用此服务来获取共享数据。您可以阅读有关此here

存储和提供XHR数据到Angular中的多个组件（2/4 +）

1 个答案: