Wie kann ich Material SideNav schließen, indem ich auf ein Element mit der RouterLink-Anweisung klicke?

Question

Ich verwende angular 4 in Kombination mit angular material.

Ich verwende einen sidenav Container einen Router und ein benutzerdefinierten erzeugte Menü:

<mat-sidenav-container> 
<mat-sidenav #sidenav> 
    <app-menu></app-menu> 
</mat-sidenav> 
<router-outlet></router-outlet> 
</mat-sidenav-container> 

Innerhalb der Menükomponente I Standard-Winkel 4 Router-Links sind mit:

<ul> 
    <li *ngFor="let hero of heroes"> 
    <a mat-button [routerLink]="['/hero/', hero.id]" queryParamsHandling="merge"> 
     {{hero.name}} 
    </a> 
    </li> 
</ul> 

Was würde Ich mag an Schließen Sie die Material sidenav, wenn Sie auf einen dieser Router-Links klicken.

Ich kann Ihnen versichern, dass ohne die Click-Event-Routing funktioniert gut, es schließt nur nicht mein Sitenav, weil der Router-Ausgang in der seitlichen Navigation ist.

Allerdings, wenn ich eine (click)="sidenav.close()" zu der a meine ganze Seite plötzlich aktualisiert, anstatt nur die Router-Link folgen.

Ich habe viele Dinge ausprobiert, aber ich kann es nicht scheinen, hoffe jemand kann helfen!

Answer 1

Ich habe einen Service erstellt, damit das Sitenav von verschiedenen Komponenten gesteuert werden kann. Ich folgte this example.

Dann ist es wichtig, den Router nach Ereignissen zu beobachten und nach Bedarf zu schließen. In app.component.ts:

this.router.events.subscribe(event => { 
    // close sidenav on routing 
    this.sidenavService.close(); 
}); 

Das funktioniert nicht, wenn Sie die sidenav auf nur spezifische Links schließen wollen, aber der Dienst selbst würde das erleichtern.

Answer 2

Inspiriert auf der Antwort von @ Isherwood kam ich mit einer Lösung:

Ich habe den folgenden Service:

import { Injectable } from '@angular/core'; 
import { MatSidenav } from '@angular/material'; 

@Injectable() 
export class SidenavService { 

    public sideNav:MatSidenav; 
    constructor() { } 
} 

ich meine App Komponente verändern die sideNav Eigenschaft in dem obigen Service einzustellen.

export class AppComponent implements OnInit { 
    title = 'app'; 

    @ViewChild('sidenav') public sideNav:MatSidenav; 
    constructor(private sidenavService: SidenavService) {  
    } 

    ngOnInit() { 
    this.sidenavService.sideNav = this.sideNav; 
    } 
} 

Bitte beachten Sie, dass es sehr wichtig ist OnInit umzusetzen und die sidenavService.sideNav in der ngOnInit Funktion einzustellen.

Sie können Ihren sideNavService dann überall verwenden, wo Sie möchten. In meinem Fall verwende ich es nur in den Komponenten, die ich tatsächlich in meinem seitlichen Navigationsmenü verbinde.

Beispiel:

export class HeroComponent implements OnInit { 

    constructor(private sidenavService: SidenavService) {  
    } 

    ngOnInit() { 
    this.sidenavService.sideNav.close(); 
    } 
} 

Sie werden wahrscheinlich wollen es auf Änderung eines Parameters statt auf init zu tun, aber Sie erhalten den Punkt.