从另一个访问组件变量

Question

我正在尝试将 sidenav 集成到我的应用程序中，但它要求 sidenav 代码位于 app.component 主页面中，而实际上我只需要一个组件中的 sidenav。

我有一个名为 combos 的变量。如果combos.length >=1，我显示sidenav。

这是我放在 app.component.html 中的代码：

    <md-sidenav-layout>
      <md-sidenav #IVCombos mode="side" *ngIf="result?.combos?.length >=1">
MY SIDENAV
      </md-sidenav>

    <!-- Routed views go here -->
    <router-outlet></router-outlet>
    </md-sidenav-layout>

如您所见，内容被包裹在 sidenav 中。用户将一些数据放在我的一个路由器组件上的输入上，combos 变量会发生变化。

由于此变量是路由器组件的实例，而不是在我的 HTML 中的 app.component.ts 中，因此不会显示 sidenav。

我的问题是：

从我的 app.component.ts 访问我的组件 combos 变量的最佳方式是什么？

这种情况下是否需要为一个变量创建服务？

Answer 1

我认为最好的选择是使用共享服务。在这种情况下也可以使用 store ，但在您的情况下不是必需的。

共享服务（在共享模块中）：

只需将您的数据存储为服务类属性。

缺点：

• 在 Angular 2 中，服务可以是全局或模块范围的。这是什么意思？如果您将您的服务添加到 global 模块提供程序数组中并且错误地 - 也作为您的 feature 模块提供程序，角度 2 将创建 两个 实例您的服务，因此其中之一 - 将有空数据。您可以在那里找到类似的问题 - https://angular.io/docs/ts/latest/guide/ngmodule.html#!#q-why-it-is-bad

Ngrx 存储（如 Redux）：

您可以使用 ngrx 存储概念 - https://github.com/ngrx/store。

优点：

• 您可以订阅您的商店在所有应用程序、每个组件中，这样您就可以对每次数据更改做出正确反应，
• 存储中的数据将是不可变的 - 要更改任何内容，您必须调度一个操作，该操作调用纯 reducer 函数，因此不可能意外修改任何用户数据。