路由到子组件时隐藏 sidenav答案

【问题标题】：Hide sidenav when routing to child component路由到子组件时隐藏 sidenav
【发布时间】：2019-08-04 14:29:55
【问题描述】：

我有一个带有工具栏和 sidenav（Angular 材料设计）的主组件。我在 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，那么组件会正常加载。我不确定问题是什么，因为我也没有收到任何错误。

请建议隐藏侧导航的最佳方法。

【问题讨论】：

您是在<mat-sidenav> 还是<mat-sidenav-content> 上申请*ngIf？你需要切换 sidenav 还是隐藏？
我正在将 ngif 应用于 mat-sidenav。我不想切换但隐藏 sidenav 以在页面上显示完整的详细信息。 Toggle 对我有用，但对于这条特定路线，我想隐藏它。

标签： angular angular2-routing ngxs

【解决方案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>

【讨论】：

这行得通，但我在 NGXS 商店中使用了一个属性来控制 sideNav 的可见性。感谢柴坦亚的帮助。