Angular 2 материал: sidenav переключается с другого компонента

Я использую Angular 2 Материал 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>

Теперь.., чтобы открыть sidenav #end, я использую следующую кнопку в том же компоненте:

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

Но что, если я хочу использовать end.open() из другого компонента для переключения sidenav? Как я должен сделать sidenav "gloal", чтобы я мог открыть его на любом компоненте в моем приложении?

Ответ 1

Обычно для этого используется общая услуга.

Предоставить услугу у общего предка. Компонент, который контролирует открытый статус, вводит службу, а компоненты, которые хотят запросить управляющий компонент для изменения состояния, также вводят службу.

Когда какой-либо компонент хочет переключиться на sidenav, они отправляют событие с использованием общей службы. Компонент, управляющий переключателем, прослушивает события и переключается по запросу.

Подробнее см. https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Ответ 2

Используйте @ViewChild из вашего родительского компонента и передайте его компоненту, которому вы хотите получить доступ к методам sidenav (открыть, закрыть toggle).

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

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