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>

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

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

但是，如果我想使用其他组件中的end.open()来切换sidenav，该怎么办？我应该如何制作sidenav＆＃34; gloal＆＃34;所以我可以在我的应用程序中的任何组件上打开它吗？

Answer 1

通常使用共享服务。

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

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

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

Answer 2

使用您父组件中的@ViewChild，并将其传递给您想要访问sidenav方法（打开，关闭切换）的组件。

参考：https://yakovfain.com/2016/04/19/angular-2-exposing-child-components-api/

export class ParentComponent {
  @ViewChild('start') start:MdSidenav;
}

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

2 个答案: