使用服务管理Angular 5布局

Question

在angular5应用程序中，我希望通过angular服务控制页面布局的各个部分。例如，我有一个sidenav组件，当一个值被设置为open时，它会显示出来，我希望能够从任何我想要的组件中切换它。

我最初的想法是，如果我可以将sidenav值绑定到我要创建的LayoutService中的变量，并且LayoutService将包含一个切换该值并使open打开/关闭的toggle()方法，那就太好了。然后，我可以将我的LayoutService注入到我想要的任何组件中，并控制我布局的各个部分。

你知道这是不是可能的，我该怎么做呢？我想也许可以使用EventEmitter或其他东西，但我想知道是否有更简单的方法，我不想使用redux。

Answer 1

https://stackblitz.com/edit/angular-lj7gsz

这是一个侧栏，您可以使用简单的rxjs对象打开和关闭它。

在侧栏服务中，我创建了一个可以传递布尔值的BehaviorSubject，我还公开了一个Observable，它将在每次向该subject传递新值时发出。

通过订阅该可观察对象(我已经使用异步管道订阅了我自己)，我的侧栏组件将知道其他组件何时希望打开或关闭侧栏。所有其他组件需要做的就是注入服务并调用服务的open或close方法。

它并不完美，但我觉得它肯定比使用事件发射器要好，因为它们从来都不是用来在服务中使用的。

希望这能对你有所帮助。