Question

我正在开发一个Angular 2应用程序，我希望在不同的组件中存储一些“全局变量”（状态）。这可以由用户选择year和customerId等。所有组件都需要访问这些组件，以便在GET调用API /后端时使用。

我已经实现了路由器参数，因此可以通过这种方式将参数传递到组件中，但我发现这比使用每次点击通过路由器转发参数来维护状态更容易。希望这是有道理的。

无论如何，在关于StackOverflow的this问题后，我设置了以下service：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/share';
import { Observer } from 'rxjs/Observer';

interface params {
    year: string;
    customerId: number;
};

@Injectable()
export class ParameterService {

    // initial (test) values:
    p: params = {
        year: "2017",
        customerId: 101
    };

    constructor() {}
}

这似乎有两种方式，允许我的组件获取和设置这样的参数：

    // get global value
    this.year = this._parameterService.p['year'];

    // set global value
    this._parameterService.p['year'] = "2018";

数据绑定也有效。这是因为p是一个类（对象），而不是直接访问string year，正如我所理解的那样。如果我更改year的{{1}}值，那么component1（下方）将反映更改：

component2

我需要做的就是将<h1>Year = {{this._parameterService.p['year']}}</h1>注入任何需要它的组件，我就完成了。 但是，我无法弄清楚如何扩展它，以便组件将重新加载（执行另一个ParameterService调用）并使用更改的参数。

对于路由器参数，组件在其GET方法中“订阅”params，导致路由更改时“刷新”：

ngOnInit

如何基于ngOnInit(): void { this.sub = this._route.params.subscribe(params => { this.customerId = params['customerId']; this.year = params['year']; this.resetComponentState(); // based on new parameter this time }); } resetComponentState(): void { this._otherService.getDataFromApi(this.year) .then( myData => this.myData = myData, error => this.errorMessage = <any>error); }实现同样的目标？有可能以某种方式将ParameterService与this.year绑定在this._parameterService.p['year']中吗？顺便说一句，我已经试图这样做，但没有效果。

更新这是我要在参数更改时刷新的完整组件（不仅仅是路由器参数更改）：

resetComponentState()

Answer 1

使用getter和setter。像这样：

// get global value
get year() {
   const value = this._parameterService.p['year'];
   // Any other code you need to execute when the data is changed here
   this.getDataFromApi();
   return value;
}

set year(value) {
   this._parameterService.p['year'] = value;
}

我在这里有一篇博文：https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

这里有一个吸烟者：https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview

Angular 2：制作“全局参数服务”并订阅其参数

1 个答案: