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

我在一个页面上有两个组件：Component1和Component2。每个内部都是Component3。很明显，每个组件3都是它自己的组件实例。但是，我希望两者之间有一个全局变量。我创建了一些数据的并排比较，并希望手风琴起作用，所以当我单击以在一个Component 3上展开手风琴时，另一个也会打开。我一直在寻找几个小时，无法找到解决方案。跨多个组件实例的角度2全局变量

我要的是，例如：

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

}

来源

2016-07-15 Chris Stanley

使用'service'并注入组件中。他们是单身人士，所以价值将是相同的各个组成部分。 – reptilicus

当我使用服务时，它似乎不是同一个变量。我会在我的服务中用我的代码更新我的问题。 –

你可能在多个地方提供你的DropDownService，因此你得到了你的服务的多个实例（在Angular 2中，服务不一定是单身人士）。只尝试将DropDownService放入Component1和Component2上方组件的'providers'数组中。然后每个Component3实例应该获得对您的服务的相同/单个实例的引用。 –

因此，你只是一半的路，你只需要一些关于如何利用服务的说明。您创建的服务只能作为“提供者”插入到您的主要组件中。所有子组件都将使用该服务作为“依赖注入”，这意味着子组件将在它们的构造方法参数中请求服务。

例如您的主要部件看起来就像这样

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例如组件式两种。为了您的代码，你只有这适用于你的第三个组件），将通过其构造商注入服务。

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模块。如果您使用的是SystemJS，那么该调度程序将向您展示如何添加此功能。如果您使用TypeScript编译器将您的.ts转换为.js，则还需要通过npm安装RxJS（在plunker示例中，SystemJS使用模块进行转储）。

关于Angular 2 Observable的好教程可以在here找到。本教程充分利用了比我在重击中使用的更多的功能，但这应该足以让您开始。

来源

2016-07-16 02:29:15

非常感谢你！这plnkr真的帮助我全力以赴。 –

你在哪里提供服务？

你真正想要做的是在app.component.ts中提供它。这样，同一个实例可用于所有子组件。

你是否在提供这两个组件？如果您在组件1和组件2中都提供它，您将得到不同的实例

来源

2016-07-16 01:52:50 domfx

由于要在组件3的两个实例之间共享变量Ind DropDownService，实例化它的最佳位置应该位于页面组件中。将两个component3实例

假设你的组件树的最低共同祖先是这样的： -

   PageComponent 
      /  \ 
      /   \ 
    Component1   Component2 
     /     \ 
    /     \ 
    Component3    Component3

最好的地方，提供一个存储中提供DropDownService将在PageComponent的组件装饰。然后，您应该将其注入到Component3的构造函数中。如果您在Pagecomponent的任何子组件的提供者中指定服务，则会再次创建一个新实例。

来源

2016-07-16 02:19:42

尝试仅在app.component.ts或main.ts中注入这些服务一次。

如果你在每个组件的提供者中注入它们，它将创建一个仅限于那些组件的新范围，并且全局变量将无法按预期工作。

来源

2016-07-16 05:26:12

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

回答

相关问题