홈>
여기서 로그인 페이지에서 머리글과 바닥 글을 숨길 수 없습니다. 여기에 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
-
답변 # 2
app.component.html (콘센트를 표시하는 데 사용하는 페이지)에서 코드를 직접 삽입하고 있습니다 :
< Your header code > .... <router-outlet></router-outlet> .... < Your footer code >
해결책은 :
헤더 및 바닥 글 코드를 별도의 구성 요소 (예 : HeaderComponent 및 FooterComponent)로 제거한 다음
적절한 선택기를 사용하여 표시하려는 페이지에만 콘센트를 호출하십시오.
예 : https://stackblitz.com/edit/angular-uhvgjm (일부 작업을 수행했습니다. 머리글과 바닥 글을 표시하려면 계속해야합니다)
관련 자료
- swift - Js 및 iOS-14를 사용하여 WKWebView에서 머리글 및 바닥 글을 숨기는 방법
- R을 사용하여 열의 비어 있지 않은 값에 대한 머리글 복사
- java - Apache Camel을 사용하여 바코드를 읽을 수 없습니다
- python - SED를 사용하여 동일한 HEADER 형식으로 여러 데이터 세트 연결
- php - Symfony 34를 사용하여 로그인 후 phpsessid를 변경하는 방법
- linux - ssh 키와 비밀번호를 사용한 원격 로그인 이상한 오류 - 디렉터리입니다
- centos7 - CWP | 사용자 로그인-> uerror — Centos Panel을 사용하여 CentOS 8에서 사용자로 로그인 할 수 없습니다
- java - Spring Boot를 사용하여 제공 할 수 없습니다
- Python Drive API를 사용하여 200MB 이상의 csv 파일을 업로드 할 수 없습니다
- javascript - react-router를 사용하여로드 할 수없는 경로
- Spring Boot에서 JUnit 5를 사용하여 RestTemplate을 모의 할 수 없습니다
- spring - JUnit 5에서 @Value를 사용하여 속성 값을 가져올 수 없습니다
- javascript - iframe을 사용하여 Angular JS 애플리케이션에서 Angular 10 애플리케이션으로 메시지를 게시 할 수 없음
- jquery - Kendo UI Grid를 사용하여 백엔드 페이지 매김을 사용할 수 없습니다
- html - PHP를 사용하여 세션 시간 초과로 인해 로그인 할 때 사용자를 마지막 활성 페이지로 리디렉션하려면 어떻게해야합니까?
- typescript - Angular에서`ComponentFactoryResolver`를 사용할 때 다른 구성 요소로 데이터를 전달할 수 없습니다
- shell - awk를 사용하여 헤더를 유지하면서 정렬
- javascript - Twilio를 사용하여 보낸 메시지 목록을 resjson 할 수 없습니다
- html - nodejs에서 로그인에 bcrypt 사용
- reactjs - JSX에서 삼항 연산자를 사용하여 리디렉션을 포함 할 수 없습니다
관련 질문
- javascript - Angular 9에서 개발 된 Custom Directive는 모바일에서 작동하지 않습니다
- javascript - 체인의 일부로 매개 변수 사용
- javascript - 이 유효성 검사기에서 "정의되지 않은 'http'속성을 읽을 수 없음"이 나타나는 이유는 무엇입니까?
- javascript - 정의되지 않은 Angular/TypeScript의 'forEach'속성을 읽을 수 없습니다
- javascript - 시작일과 종료일에서 동일한 날짜를 선택하면 내 날짜 필터에 결과가 표시되지 않습니다 그것을 고치는 방법?
- javascript - Angular의 다른 구성 요소에서 모달 대화 상자를 호출하는 적절한 방법은 무엇입니까?
- javascript - combinelatest 재설정 관찰 가능 - rxjs
- javascript - WASM을 Angular 서비스에 올바르게 통합하는 방법
- javascript - 루프백 4에서 requestBody를 만드는 모범 사례는 무엇입니까?
- javascript - 정의되지 않은 'RecaptchaVerifier'속성을 읽을 수 없습니다
ngIf
사용 :for@ angular/router에서 라우터를 사용해야합니다.
Component.ts :
Component.html :
참고 : 헤더에 다른 구성 요소를 사용하는 경우 (
changes<app-header>
) 및 바닥 글 (<app-footer>
) ) 당신도 그들과 함께 * ngIf를 사용할 수 있습니다 ..2 개의 변화는 당신이 이것을 달성하는데 도움을 줄 수 있습니다 ...
서비스에서 getUser를 호출 한 후 설정되는 부울 플래그 ... 유효한 사용자의 경우 부울을 true로 설정하고 탐색이 표시됩니다
HTML에서이 부울 변수에 대해 ngIf를 설정했습니다