kątowy Materiał 2: sidenav przełączać się z innym składnikiem

Question

używam Angular 2 Material sidenav w moim projekcie w ten sposób:

app.component.ts (Główny) html widok:

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

teraz .. w celu otwarcia #end sidenav używam poniższy przycisk w tym samym składniku:

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

Ale co jeśli chcesz użyć end.open() z innego komponentu do przełączania sidenav? Jak mam zrobić sidenav "gloal", aby móc otworzyć go na dowolnym komponencie w mojej aplikacji?

Answer 1

Zazwyczaj używana jest do tego usługa współdzielona.

Świadczenie usługi u wspólnego przodka. Komponent, który steruje stanem otwartym, wstrzykuje usługę, a komponenty, które chcą zażądać elementu sterującego, aby zmienić status, również wstrzykują usługę.

Kiedy jakiś komponent chce, aby sidenav przełączał się, wysyła zdarzenie, korzystając z usługi udostępnionej. Komponent sterujący przełącznikiem nasłuchuje zdarzeń i przełącza na żądanie.

Aby uzyskać więcej informacji zobacz https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

Używaj @ViewChild od składnika dominującego, i przekazać je do elementu, który chcesz uzyskać dostęp do metod sidenav (otwieranie, zamykanie przełączyć) z.

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

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