Angular 2 Material : sidenav toggle from another component

Question

我正在使用 Angular 2 Material sidenav 在我的项目中是这样的:

app.component.ts (主要)html View :

<md-sidenav-layout>
  <md-sidenav #start mode="side" [opened]="true">
      This is the main sidenav
      <sidebar></sidebar>
  </md-sidenav>

  <md-sidenav #end align="end">
    This sidenav suppose to open from different components across my application to show extra information/data when user clicks an image for example.
    <br>
    <button md-button (click)="end.close()">Close</button>
  </md-sidenav>

<router-outlet></router-outlet>

</md-sidenav-layout>

现在..为了打开#end sidenav 我在同一组件中使用以下按钮:

<button md-button (click)="end.open()">Open End Side</button>

但是，如果我想使用 end.open() 怎么办？从不同的组件切换 sidenav？ 我应该如何使 sidenav 成为“全局”，以便我可以在我的应用程序的任何组件上打开它？

Answer 1

通常为此使用共享服务。

在共同祖先处提供服务。控制打开状态的组件注入(inject)服务，想要请求控制组件改变状态的组件也注入(inject)服务。

当某些组件希望 sidenav 切换时，它们会使用共享服务发送一个事件。控制切换的组件监听事件并根据请求切换。

有关详细信息，请参阅 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service