Question

我在一个页面上有两个组件：Component1和Component2。其中每一个都是Component3。显然，每个组件3都是它自己的组件实例。但是，我想在两者之间建立一个全局变量。我正在创建一些数据的并排比较，并希望手风琴能够工作，所以当我点击展开一个组件3上的手风琴时，另一个也会打开。我一直在寻找几个小时，但无法找到解决方案。

我想要的是，例如：

(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

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

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

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

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

下一步是在服务中添加“observable”，然后“订阅”您子组件中的observable。

这是一个plunker，可以准确地展示您的目标。您将需要使用RxJS模块。如果您使用的是SystemJS，则plunker会向您显示如何添加此项。如果您使用TypeScript编译器将.ts转换为.js，则还需要通过npm安装RxJS（在plunker示例中，SystemJS使用模块进行转换）。

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

Answer 2

由于变量ind DropDownService将在组件3的两个实例之间共享，因此实例化它的最佳位置将在页面组件中.Page组件将是两个component3实例的最低共同祖先

假设您的组件树是这样的： -

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

在providers数组中提供DropDownService的最佳位置将在PageComponent的Component Decorator中。然后，您应该将它注入Component3的构造函数中。如果在Pagecomponent的任何子组件的提供程序中指定服务，则将再次创建新实例。

Answer 3

您在哪里提供服务？

你真正想做的是在app.component.ts中提供它。这样，所有子组件都可以使用相同的实例。

您是否在两个组件中提供它？如果您在component1和component2中都提供它，您将获得不同的实例

Answer 4

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

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

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

4 个答案: