路由到子组件时隐藏sidenav

Question

我有一个带工具栏和 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的最佳方法。

Answer 1

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

路由到子组件时隐藏sidenav

Hide sidenav when routing to child component

angular

angular2-routing

ngxs