Question

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

请建议隐藏边栏的最佳方法。

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

1 个答案: