홈>
여기서 로그인 페이지에서 머리글과 바닥 글을 숨길 수 없습니다. 여기에 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 키와 비밀번호를 사용한 원격 로그인 이상한 오류 - 디렉터리입니다
- CWP | 사용자 로그인 ->UERROR -CentOS 패널을 사용하여 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 : 객체에 선택적 값을 추가하는 더 좋은 방법이 있습니까?
- javascript : 모난. TS2339: 'subscribe' 속성이 'void' 유형에 존재하지 않습니다.
- javascript : Angular Reactive Forms 유효성 검사의 이상한 오류
- javascript : 닫는 태그에 속성을 추가하는 HTMLElement.innerHTML, 왜 그런지 모르겠습니다.
- javascript : 비활성화 전 24시간 제한
- javascript : angularjs에서 Excel로 내보내는 동안 표 앞에 제목과 빈 행을 추가하려면 어떻게 해야 합니까?
- javascript : s3 버킷의 X3d 파일이 로드되지 않음
- javascript : 페이지가 매겨진 배열 정렬
- javascript : Angular 7: 실행 전 요청에 대한 응답이 액세스 제어 검사를 통과하지 않음: 요청된 항목에 'Access-Control-Allow-Origin' 헤더가 없습니다.
- Angular 5는 blob 응답 및 json 오류로 http 가져오기를 관리합니다.
ngIf
사용 :for@ angular/router에서 라우터를 사용해야합니다.
Component.ts :
Component.html :
참고 : 헤더에 다른 구성 요소를 사용하는 경우 (
changes<app-header>
) 및 바닥 글 (<app-footer>
) ) 당신도 그들과 함께 * ngIf를 사용할 수 있습니다 ..2 개의 변화는 당신이 이것을 달성하는데 도움을 줄 수 있습니다 ...
서비스에서 getUser를 호출 한 후 설정되는 부울 플래그 ... 유효한 사용자의 경우 부울을 true로 설정하고 탐색이 표시됩니다
HTML에서이 부울 변수에 대해 ngIf를 설정했습니다