javascript - 无法使用 Angular 从登录页面隐藏页眉和页脚

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/router 中的路由器。

组件.ts:

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

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

组件.html:

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

注意:如果您对页眉 ( <app-header> ) 和页脚 ( <app-footer> ) 使用不同的组件，您也可以将 *ngIf 与它们一起使用..