如何在登录页面angular2中隐藏侧边菜单
如何在登录页面angular2中隐藏侧边菜单
提问于 2017-03-15 12:18:16
我想在Angular2应用程序中隐藏登录页面上的side-menu。这是我的应用程序组件，它有顶部菜单，侧边菜单和路由器插座。
app.component.html
<div class="row content-container">
<top-menu></top-menu>
<side-menu></side-menu>
</div>
<div class="container">
<router-outlet></router-outlet>
</div>由于我不知道如何在登录页面中隐藏侧边菜单，所以我在side-menu.component.html中隐藏了*ngIf，如下所示。
side-menu.component.html
<div class="side-menu sidebar-inverse" background-color="black" *ngIf="isLoggedIn">
...
</div>login.component.html
<div class="ui-g-12">
....
....
</div>我尝试使用完整的html login.component.html，如下所示。
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
</head>
<body>
<div class="app-container>
....
</div>
</body>
</html>但问题是，一旦我登录，我必须刷新浏览器以获得side-menu，一旦我注销，我必须再次刷新浏览器以隐藏它。我不喜欢这种方法，因为这不是正确的方法。我想知道在我的login页面中隐藏侧边菜单的正确方法。我在Aungular2中使用aungular-cli和Typescript。请告诉我怎么做。谢谢。
回答 1
Stack Overflow用户
发布于 2017-09-01 14:16:48
您可以订阅这样的路由器事件，并让它们自动更新，检查isLogin变量。您必须在处理侧边栏组件显示的rootComponent或父组件中执行此操作。这里有一些代码可以帮助你：
//appComponent(root component)
<div class="wrapper">
<div *ngIf=isLoggedIn class="sidebar" data-background-color="white" data-active-color="danger">
<sidebar-cmp></sidebar-cmp>
</div>
<div class="main-panel">
<navbar-cmp *ngIf=isLoggedIn></navbar-cmp>
<div class="content">
<router-outlet></router-outlet>
</div>
<footer-cmp></footer-cmp>
</div>组件应该像这样订阅路由器事件：
import { Router, NavigationEnd } from "@angular/router";
import { Component } from "@angular/core";
import { OnInit } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
showNav: boolean;
ngOnInit() {
this.router.events.subscribe(e => {
if (e instanceof NavigationEnd) {
let urlSlice = e.url.toString().substr(0, 10);
if (urlSlice.indexOf("login") !== -1) {
console.log(urlSlice);
this.isLoggedIn = false;
} else {
this.isLoggedIn = true;
}
}
});
}
constructor(private router: Router) {
this.showNav = true;
this.showSideBar = true;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42801024
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号