Question

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

我有一个名为组合的变量。如果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变量会发生变化。

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

我的问题是：

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

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

Answer 1

我认为最好的选择是使用共享服务。此外，在这种情况下也可以使用商店，但在您的情况下则没有必要。

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

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

<强>缺点：

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

Ngrx商店（如Redux）：

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

<强>优点：

您可以在每个组件的所有应用程序中订阅您的商店，这样您就可以对每次数据更改做出正确的反应，
商店中的数据将不可变 - 要更改任何内容，您必须调度一个动作，调用纯缩减器功能，因此无法意外修改任何用户数据。

从另一个访问组件变量

1 个答案: