Angular 2 Material: sidenav von einer anderen Komponente wechselt

Question

ich Angular 2 Material sidenav in meinem Projekt auf diese Weise mit:

app.component.ts (Haupt) HTML-Ansicht:

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

Jetzt .. um das zu öffnen #end sidenav ich die folgende Schaltfläche in der gleichen Komponente verwenden:

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

Aber was, wenn ich Möchten Sie end.open() von einer anderen Komponente verwenden, um das Sidénav umzuschalten? Wie soll ich das Sidénav "Gloal" machen, damit ich es auf jeder Komponente in meiner App öffnen kann?

Answer 1

Normalerweise wird hierfür ein gemeinsamer Dienst verwendet.

Stellen Sie den Dienst bei einem gemeinsamen Vorfahren zur Verfügung. Die Komponente, die den offenen Status steuert, injiziert den Dienst, und die Komponenten, die von der steuernden Komponente den Status ändern möchten, fügen auch den Dienst ein.

Wenn eine Komponente das Sidennav umschalten möchte, senden sie ein Ereignis über den Shared Service. Die Komponente, die den Schalter steuert, wartet auf Ereignisse und schaltet bei Bedarf um.

Weitere Details finden https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

Verwenden @ViewChild von Ihrem Elternkomponente, und es Komponente zu übergeben, die Sie möchten sidenav Methoden (öffnen, schließen Toggle) aus zuzugreifen.

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

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