RouterLink 지시어가있는 요소를 클릭하여 Material SideNav를 닫을 수 있습니까?

Question

angular 4과 angular material을 조합하여 사용하고 있습니다.

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

내가 싶은 것이 :

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

나는 기본적으로 각 4 라우터 링크를 사용하고있는 메뉴 구성 요소 내부 :

은 내가 sidenav 컨테이너 라우터 및 사용자 정의 생성 된 메뉴를 사용하고 있습니다 라우터 링크 중 하나를 클릭하면 Material sidenav을 닫는 것이 좋습니다.

클릭 이벤트 라우팅이 제대로 작동하지 않으면 라우터 출력이 측면 네비게이션 내부에 있기 때문에 sidenav를 닫을 수 없다는 점을 확신 할 수 있습니다.

그러나 을 a에 추가하면 라우터 링크를 따르는 대신 내 전체 페이지가 갑자기 새로 고쳐집니다.

나는 많은 것을 시도했지만, 알아낼 수없는 것처럼 보입니다. 누군가가 도울 수 있기를 바랍니다!

Answer 1

나는 여러 구성 요소로부터 sidenav를 제어 할 수 있도록 서비스를 만들었습니다. 나는 this example을 따라 갔다.

그런 다음 필요에 따라 이벤트 및 종료를 라우터에서 보는 것이 중요합니다. app.component.ts에서 :

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

당신이 만 특정 링크에 sidenav을 닫으려는 경우가 작동하지 않습니다,하지만 서비스 자체가 용이합니다. @의 isherwood의 대답에 영감을

는

Answer 2

나는 해결책을했다 :

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

@Injectable() 
export class SidenavService { 

    public sideNav:MatSidenav; 
    constructor() { } 
} 

내가 위의 서비스에 sideNav 속성을 설정 내 응용 프로그램 구성 요소를 변경 :

나는 다음과 같은 서비스를 만들었습니다.

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

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

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

는 OnInit을 구현하고 ngOnInit 함수에서 sidenavService.sideNav을 설정 중요한 매우이다 있습니다.

그러면 어디서나 sideNavService를 사용할 수 있습니다. 제 경우에는 측면 탐색 메뉴에서 실제로 링크하는 구성 요소에서만 사용합니다.

예 :

export class HeroComponent implements OnInit { 

    constructor(private sidenavService: SidenavService) {  
    } 

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

당신은 아마 매개 변수의 변화 대신 초기화에 그것을 할 수 있습니다,하지만 당신은 요점을 파악.