Question

我想在side-menu应用程序的登录页面上隐藏Angular2。这是我的应用程序组件，它有顶级菜单，侧面菜单和路由器插座。

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，如下所示..

侧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页面隐藏旁边菜单的正确方法。我正在使用aungular-cli和Typescript与Aungular2。请建议我怎么做。感谢。

Answer 1

您可以订阅这样的路由器事件并让它们自动更新检查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;
  }
}

如何隐藏登录页面angular2

app.component.html

侧menu.component.html

login.component.html

1 个答案: