홈>2020-02-01 01:18

javascript - 각도를 사용하여 로그인 페이지에서 머리글과 바닥 글을 숨길 수 없음

여기서 로그인 페이지에서 머리글과 바닥 글을 숨길 수 없습니다. 여기에 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>

이 스택에 문제가 있는지 확인하십시오

javascriptangulartypescript

답변 # 1

ngIf 사용 :

for@ angular/router에서 라우터를 사용해야합니다.

Component.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.

Component.html :

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

참고 : 헤더에 다른 구성 요소를 사용하는 경우 ( <app-header> ) 및 바닥 글 ( <app-footer> ) ) 당신도 그들과 함께 * ngIf를 사용할 수 있습니다 ..

changes

2 개의 변화는 당신이 이것을 달성하는데 도움을 줄 수 있습니다 ...

서비스에서 getUser를 호출 한 후 설정되는 부울 플래그 ... 유효한 사용자의 경우 부울을 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">

답변 # 2
app.component.html (콘센트를 표시하는 데 사용하는 페이지)에서 코드를 직접 삽입하고 있습니다 :
```
< Your header code >
....
<router-outlet></router-outlet>
....
< Your footer code >
```
해결책은 :

헤더 및 바닥 글 코드를 별도의 구성 요소 (예 : HeaderComponent 및 FooterComponent)로 제거한 다음

적절한 선택기를 사용하여 표시하려는 페이지에만 콘센트를 호출하십시오.

예 : https://stackblitz.com/edit/angular-uhvgjm (일부 작업을 수행했습니다. 머리글과 바닥 글을 표시하려면 계속해야합니다)

Python2.net

javascript - 각도를 사용하여 로그인 페이지에서 머리글과 바닥 글을 숨길 수 없음

관련 자료