>

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

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


  • 답변 # 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 (일부 작업을 수행했습니다. 머리글과 바닥 글을 표시하려면 계속해야합니다)

관련 자료

  • 이전 java - 배포 후 언어 변경 - 기계적 인조 인간
  • 다음 Azure에서 호스팅되는 ASPNET Core 앱의 Redis 연결 오류