Скрыть sidenav при маршрутизации к дочернему компоненту

У меня есть домашний компонент с панелью инструментов и sidenav (дизайн Angular Material). У меня есть три раскрывающихся списка на sidenav: 1. Страна 2. Штат 3. Город При выборе города я направляюсь к вложенному дочернему компоненту и хочу также скрыть sidenav:

home.component.html

<mat-sidenav-content>
    <router-outlet></router-outlet>
</mat-sidenav-content>

home.component.ts

  selectCity(event) {
    this.store.dispatch(new GetCityDetails(event.value))
      .subscribe(res => {
        this.isHome = false;
        this._route.navigate(['home/citydetail']);
      });
  }

Я использую *ngIf, чтобы скрыть или показать sidenav.

Проблема, с которой я сталкиваюсь, заключается в том, что если я устанавливаю «isHome = false», я не получаю никаких ошибок, но angular не загружает компонент citydetail.

Если я не скрываю sidenav, то компонент загружается нормально. Я не уверен, в чем проблема, потому что я тоже не получаю никаких ошибок.

Пожалуйста, предложите лучший способ скрыть sidenav.


angular ngxs angular2-routing
person Sunil Ojha    schedule 03.08.2019    source источник
comment
Вы применяете *ngIf в <mat-sidenav> или <mat-sidenav-content>? А сиденав надо переключать или скрывать?   -  person Chaitanya    schedule 03.08.2019
comment
Я применяю ngif к мат-сиденаву. Я не хочу переключаться, а скрывать sidenav, чтобы показать полную информацию на странице. Переключение у меня работает, но для этого конкретного маршрута я хочу его скрыть.   -  person Sunil Ojha    schedule 03.08.2019

Ответы (1)


arrow_upward
1
arrow_downward 

<!-- app.component.ts --->
constructor(private router: Router){

}

ngOnInit() {

this.router.events.subscribe((val) => {
  if (val instanceof NavigationEnd) {

    this.getUrl();
  }
});
}

getUrl(){
  this.selectedRoute = this.router.url;
}

Теперь при проверке app.component.html маршрут не равен маршруту, который нужно скрыть

<mat-sidenav *ngIf="selectedRoute !== '/child-route'></mat-sidenav>

person Chaitanya    schedule 03.08.2019
comment
Это сработало, но я использовал свойство в магазине NGXS для управления видимостью sideNav. Спасибо Чайтанья за вашу помощь. - person Sunil Ojha; 04.08.2019