我想在side-menu
应用程序的登录页面上隐藏Angular2
。这是我的应用程序组件,它有顶级菜单,侧面菜单和路由器插座。
<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
,如下所示..
<div class="side-menu sidebar-inverse" background-color="black" *ngIf="isLoggedIn">
...
</div>
<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
页面隐藏旁边菜单的正确方法。我正在使用aungular-cli
和Typescript
与Aungular2
。请建议我怎么做。感谢。
答案 0 :(得分:0)
您可以订阅这样的路由器事件并让它们自动更新检查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;
}
}