跨多个组件实例的 Angular 2 全局变量

Question

我在一个页面上有两个组件:Component1 和 Component2。每个里面都有 Component3。显然，每个 Component 3 都是它自己的组件实例。但是，我想要两者之间的全局变量。我正在创建一些数据的并排比较，并且希望 Accordion 可以工作，所以当我单击以展开一个组件 3 上的 Accordion 时，另一个也会打开。我已经搜索了几个小时，但找不到解决方案。

我想要的是，例如:

(click) = "changeGlobalVar()"

改变全局变量。那么我想拥有

*ngIf="globalVar"

这样一来，无论我点击哪个组件，ngIf 都适用于组件 3。

有人可以帮帮我吗？几个小时以来，我一直在寻找这个问题的答案。

这是我的服务代码的样子，但似乎不起作用:

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

@Injectable()
export class DropDownService {

  public _acDropDownToggle: boolean;

  setValue(val) {
    this._acDropDownToggle = val;
  }

  getValue() {
    return this._acDropDownToggle;
  }

}

Answer 1

所以您已经完成了一半，您只需要了解一些有关如何利用服务的信息。您创建的服务只能作为“提供者”插入到您的主要组件中。所有子组件都将使用该服务作为“依赖注入(inject)”，这意味着子组件将在其构造方法参数中请求该服务。

例如，您的主要组件将如下所示

import {componentStateService} from './componentState.service'
import {ComponentOne} from './component1'
import {ComponentTwo} from './component2'
@Component({
    selector: 'test-app',
    template : `...`,
    providers: [componentStateService],<----
    directives: [ComponentOne,ComponentTwo]
})
export class AppComponent {
    constructor(){}
}

然后子组件(在我的 plunker 示例中为组件一、组件二。对于您的代码，您只会将其应用于第三个组件)，将通过其构造函数注入(inject)服务。

import {componentStateService} from './componentState.service'
@Component({
    selector: 'component-one',
    template : `...`
})
export class ComponentOne extends OnInit {
    private _componentVisible:boolean;
    constructor(private _componentStateService:componentStateService){<----
        this._componentVisible = true;
    }
}

这将确保只创建一个服务实例。

---

下一步是向您的服务添加一个“可观察对象”，然后在您的子组件中“订阅”该可观察对象。

这是一个plunker这正是您要寻找的东西。您将需要使用 RxJS 模块。 plunker 向您展示了如何在使用 SystemJS 时添加它。如果您使用 TypeScript 编译器将 .ts 转换为 .js，您还需要通过 npm 安装 RxJS(在 plunker 示例中，SystemJS 使用模块进行转换)。

关于 Angular 2 Observables 的一个很好的教程可以找到 here .本教程利用的功能比我在 plunker 中使用的功能多得多，但这应该足以让您入门。