angolare 2 materiale: sidenav passare da un altro componente

Question

sto usando Angular 2 Material sidenav nel mio progetto in questo modo:

vista app.component.ts (Main) 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> 

Ora .. al fine di aprire il #end sidenav io uso il seguente pulsante nello stesso componente:

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

Ma, cosa succede se io vuoi usare end.open() da un altro componente per attivare il sidenav? Come dovrei rendere il sidenav "gloal" così posso aprirlo su qualsiasi componente nella mia app?

Answer 1

In genere viene utilizzato un servizio condiviso.

Fornire il servizio a un antenato comune. Il componente che controlla lo stato aperto inietta il servizio e i componenti che desiderano richiedere al componente di controllo di modificare lo stato iniettano anche il servizio.

Quando alcuni componenti vogliono che il sidenav si sposti, inviano un evento utilizzando il servizio condiviso. Il componente che controlla il commutatore ascolta gli eventi e attiva/disattiva su richiesta.

Per maggiori dettagli si veda https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

Usa @ViewChild dal componente principale, e passarlo al componente che si desidera accedere ai metodi sidenav (apertura, chiusura a ginocchiera) da.

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

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