Angular 2基于路由在某些页面上隐藏导航

我试图在用户查看某些页面时自动隐藏导航。例如，如果用户正在查看登录页面，则不应显示菜单

到目前为止，我一直在尝试的是，我有一个Navigator服务，它将根据当前页面的URL路径更改“ShowNavigation”标志。这是由一个App-Guard访问的，到目前为止，他的工作是将下一个URL传递给Navigator服务并更新“show-navigation”标志

就测试而言，我正在通过单击事件更新视图，以检查服务是否接收到正确的数据并相应地更新

我唯一的问题是，我想不出一种方法来订阅/收听“show navigation”标志“所有时间”的更改。我的意思是，我希望导航被自动隐藏和显示

导航器服务

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类导航服务{
私有showNavigation:boolean=false；
displayNavigation（）：可观察{
返回可观察的（此显示导航）；
}
toggleNavigation（URL路径：字符串）{
如果（urlPath==“登录”）{
this.showNavigation=false；
}否则{
this.showNavigation=true；
}
}
}

应用程序保护

从'@angular/core'导入{Injectable}；
从“@angular/router”导入{ActivatedRouteSnapshot，CanActivate}；
从“rxjs/Observable”导入{Observable}；
从“../services”导入{NavigatorService}；
@可注射（）
导出类AppGuard实现了CanActivate{
构造函数（私有导航服务：导航服务）{}
canActivate（下一步：ActivatedRouteSnapshot）{
console.log（下一步）；
this.navigatorService.toggleNavigation（next.url[0].path）；
//现在返回可观察到的真实。。。
//将在添加额外功能时更改
可观察的返回（真）；
}
}

应用程序组件

从'@angular/core'导入{Component}；
从“./shared”导入{NavigatorService}；
@组成部分({
选择器：“应用程序”，
样式URL：[
“./app.style.css”
],
模板：require（“./app.component.html”）
})
导出类AppComponent{
showNavigation:boolean=true；
构造函数（私有导航服务：导航服务）{}
//按钮点击事件
toggleNav（）{
此文件为.navigatorService.displayNavigation
.subscribe（res=>this.showNavigation=res）；
}
}

应用程序组件模板

切换导航

从上面的测试中可以看出，我有一个“切换导航”按钮，这样我就可以订阅服务了。老实说，我不知道这是否是最好的实现，也许我没有以正确的方式进行。我想问一下，是否有一种方法可以让应用程序组件始终知道“显示导航”标志的值

更新-问题已解决

我遵循这一点，正确地找到了答案。我更新了导航服务，如下所示：

导航器服务

从'@angular/core'导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
@可注射（）
导出类导航服务{
私人娱乐导航：主题；
构造函数（）{
this.showNavigation=新主题（）；
}
get displayNavigation（）：可观察{
返回此.showNavigation.asObservable（）；
}
toggleNavigation（URL路径：字符串）{
设showNav:boolean；
如果（urlPath==“登录”）{
showNav=false；
}否则{
showNav=true；
}
this.showNavigation.next（showNav）；
}
}

然后我在应用程序组件的

ngOnInit

生命周期挂钩中订阅服务：

从'@angular/core'导入{Component，OnInit}；
从“./shared”导入{NavigatorService}；
@组成部分({
选择器：“应用程序”，
样式URL：[
“./app.style.css”
],
模板：require（“./app.component.html”）
})
导出类AppComponent实现OnInit{
showNavigation:boolean=true；
构造函数（私有导航服务：导航服务）{}
恩戈尼尼特（）{
此文件为.navigatorService.displayNavigation
.subscribe（res=>this.showNavigation=res）；
}
}

---

我仍然不能100%确定这是否是最好的方法，但到目前为止它已经解决了我的问题。

供其他人参考，您可以使用路由器来完成这项工作。下面的例子中，我在AppComponent的模板中只有一个

，并将所有要隐藏的内容移动到一个名为DefaultLayoutComponent的单独布局视图中

将菜单/页脚和

放在DefaultLayoutComponent中。现在，只有DefaultLayoutComponent的子级（即下面的dashboard和invite组件）具有公共布局。其他页面（即下面的登录）将有一个空白布局

RouterModule.forRoot([
  { path: 'login', component: LoginComponent},
    { path: '', component: DefaultLayoutComponent, children: [
      { path: '', component: DashboardComponent},
      { path: 'dashboard', component: DashboardComponent },
      { path: 'invite', component: InviteComponent}]
    },
  { path: '**', redirectTo: ''}
])

---

请看我的答案。您可以实现类似的功能。谢谢你的评论。巧合的是，我刚刚用一个有效的解决方案更新了我的问题。我希望得到一些反馈，以了解这是否是一个好的解决方案。为什么它必须是双重嵌套的？@SinistraD您感到困惑是正确的！它不需要双重嵌套，我将更改我的帖子以减少混乱。这并没有回答最初的问题。这根本没有说明如何使用防护装置