跨多个组件实例的Angular 2全局变量 [英] Angular 2 Global Variable across multiple component instances

问题描述

我在一页上有两个组件:Component1和Component2.在每个组件内部都是Component3.显然，每个组件3都是其自己的组件实例.但是，我希望两者之间有一个全局变量.我正在创建一些数据的并排比较，并且希望手风琴能够工作，因此，当我单击以在一个组件3上展开手风琴时，另一个组件也将打开.我一直在找几个小时，却找不到解决方法.

I have two components on one page: Component1 and Component2. Inside each of those is Component3. Obviously each Component 3 is its own instantiation of the component. However, I would like a global variable between the two. I'm creating a side-by-side comparison of some data, and would like an accordion to work, so when I click to expand the accordion on one Component 3, the other one also opens. I have been searching for hours and cannot find a resolution to this.

例如，我想要的是

(click) = "changeGlobalVar()"

更改全局变量.那我想拥有

to change the global variable. Then I would like to have

*ngIf="globalVar"

这样，无论我单击哪个组件，ngIf都可以在两个组件3上使用.

That way, the ngIf works on both Component 3, no matter which one I click on.

有人可以帮我吗?我已经在寻找答案了好几个小时了.

Could someone please help me out? I've been searching for an answer to this for hours.

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

Here's what my service code looks like but doesn't seem to be working:

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

@Injectable()
export class DropDownService {

  public _acDropDownToggle: boolean;

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

  getValue() {
    return this._acDropDownToggle;
  }

}

推荐答案

因此，您已经走了一半，您只需要对如何利用服务进行一些说明即可.您创建的服务仅应作为提供者"插入到您的主要组件中.所有子组件都将服务用作依赖项注入"，这意味着子组件将在其构造函数方法参数中请求服务.

So you are half way there and you need just a few clarifications on how to leverage a service. The service you create should only be inserted as a "provider" in your main component. All child components will use the service as a "Dependency injection", this means the child components will request the service in their constructor method arguments.

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

For example your primary component will look like this

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示例中为component-one，component-two.对于您的代码，您仅将其应用于第三个组件)，将通过其构造函数注入服务.

Then the child components (component-one,component-two in my plunker example. For your code you would only apply this to your third component), will have the service injected in through their constructors.

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;
    }
}

这将确保仅创建服务的一个实例.

This will ensure that only one instance of your service is created.

下一步是在您的服务中添加一个可观察的"，然后在您的子组件中订阅"该可观察的.

The next step is to add an "observable" to your service and then "subscribe" to that observable in your child components.

这是一个 plunker ，它可以准确地说明您要查找的内容.您将需要使用RxJS模块.插件显示了如何在使用SystemJS的情况下添加此代码.如果使用TypeScript编译器将.ts转换为.js，则还需要通过npm安装RxJS(在plunker示例中，SystemJS使用模块进行转换).

Here is a plunker that demonstrates exactly what you are looking for. You will need to use the RxJS modules. The plunker shows you how to add this if you are using SystemJS. If you are using the TypeScript compiler to transpile your .ts to .js, you will also need to install RxJS through npm(In the plunker example SystemJS is using a module to transpile).

可以在此处找到有关Angular 2 Observable的很好的教程.该教程利用的功能比我在plunker中使用的功能要多得多，但这足以让您入门.

A good tutorial on Angular 2 Observables can be found here. The tutorial leverages a lot more features than what I use in the plunker but that should be enough to get you started.

这篇关于跨多个组件实例的Angular 2全局变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！