Angular 2材质:sidenav从另一个组件切换

Question

我在这个项目中使用Angular 2 Material sidenav:

app.component.ts (主要)html视图:

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

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

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

但是,如果我想使用end.open()其他组件来切换sidenav,该怎么办？我应该怎么做sidenav"gloal"所以我可以在我的应用程序中的任何组件上打开它？

Answer 1

通常使用共享服务.

在共同的祖先提供服务.控制打开状态的组件注入服务,并且要求控制组件更改状态的组件也注入服务.

当某个组件想要sidenav切换时,他们使用共享服务发送事件.控制切换的组件会侦听事件并根据请求进行切换.

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