Question

这是我的问题，我无法从登录页面隐藏页眉和页脚。在这里，我在app.html和登录页面及主页中具有通用的页眉和页脚。无需登录，它不必显示导航，但是我仍然在身份验证之前获取导航

下面是我的代码

<nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey">
    <div class="container">
        <div class="collapse navbar-collapse" id="navbarsExampleDefault">

            <ul class="nav navbar-nav navbar-right landing-nav-text ul-right">
                <li class="active"><a href="#about">About <span class="sr-only">(current)</span></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#info">info</a></li>
                <li><a href="#demo">Demo</a></li>
                 <li><a href="#demo1">Demo1</a></li>
                  <li><a href="#demo2">Demo2</a></li>
                   <li><a href="#demo3">Demo3</a></li>
            </ul>
        </div>
    </div>
     <a (click)="Logout()" class="logout">
        Logout
    </a>
</nav>
<router-outlet><router-outlet>


<div class="footer">
    <div class="main_content">

        <div class="footer_links_end">
          <p>This is footer</p>

            <p>
                <a href="https://twitter.com">Twitter</a>
                <a href="https://www.linkedin.com">Linkedin</a>

            </p>
        </div>

    </div>
</div>

请检查此堆栈是否有问题

Answer 1

使用ngIf：

为此，您必须使用 @ angular / core 中的Router。

Component.ts：

import { Router }  from "@angular/core";
...

constructor(public router: Router){} // note you have to use Public because you are using it in html file too.

Component.html：

<nav *ngIf="router.url !== '/login' && router.url !== '/signup'"> // or maybe only 'login'
</nav>

注意：如果页眉（<app-header>）和页脚（<app-footer>）使用不同的组件，则也可以对它们使用* ngIf。

Answer 2

2项更改可以帮助您实现这一目标...

从您的服务调用getUser之后设置的布尔标志...如果是有效用户，我们会将boolean设置为true并显示导航
在HTML中，我们只是针对此布尔变量设置了ngIf

/* APP.COMPONENT.TS */
  hideName:boolean =true;
  
  constructor(public _authService:AuthService,public router:Router){
    if(this._authService.getUser() == ''){
      this.hideName = false;
    }
    else {
      this.hideName =true;
    }
  }

  <!-- Added *ngIf="hideName" to app.component.html -->
  
  <nav class="navbar navbar-toggleable-md navbar fixed-top" style="background-color:grey"  *ngIf="hideName">

Answer 3

由于在app.component.html（用于显示插座的页面）中，您正在直接插入代码：

< Your header code >

....

<router-outlet></router-outlet>

....

< Your footer code >

解决方案是：

将页眉和页脚代码删除到一个单独的组件，例如HeaderComponent和FooterComponent，然后，
使用适当的选择器，仅在您要显示的页面上呼叫插座。

例如： https://stackblitz.com/edit/angular-uhvgjm（我已经做了一些工作，要显示页眉和页脚，需要继续进行操作）

无法使用angular

3 个答案: