[英]unable to hide header and footer from login page using angular
here my issue i unable to hide the header and footer from the login page.在这里我的问题是我无法从登录页面隐藏 header 和页脚。 here i am having a common header and footer in app.html and login page & home page.
在这里,我在 app.html 和登录页面和主页中有一个常见的 header 和页脚。 With out login it does not have to show the nav but still i am getting the nav before authentication
没有登录它不必显示导航但我仍然在身份验证之前获得导航
below is my code下面是我的代码
<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>
please check this stack for issue请检查此堆栈是否有问题
for, that you have to use Router from @angular/router . 为此,您必须使用@ angular / router中的Router 。
Component.ts: 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: Component.html:
<nav *ngIf="router.url !== '/login' && router.url !== '/signup'"> // or maybe only 'login'
</nav>
Note: If you are using different components for the header ( <app-header>
) and footer( <app-footer>
) you can use *ngIf with them too.. 注意:如果您对标题(
<app-header>
)和页脚( <app-footer>
)使用不同的组件,则也可以对它们使用* ngIf。
2 changes can help you achieve this... 2项更改可以帮助您实现这一目标...
/* 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">
Because in your app.component.html (the page you use to display your outlet), you are inserting the code directly: 因为在app.component.html(用于显示插座的页面)中,您将直接插入代码:
< Your header code >
....
<router-outlet></router-outlet>
....
< Your footer code >
The solution, is to: 解决方案是:
For example: https://stackblitz.com/edit/angular-uhvgjm (I have done some part, you need to continue yourself when you want to show the header and footer) 例如: https : //stackblitz.com/edit/angular-uhvgjm (我已经做了一些工作,当您想要显示页眉和页脚时,需要继续进行操作)
you can use an injectable class with Subject inside and push anything you need to the header from any event you want您可以使用带有主题的可注射 class 并将您需要的任何内容从您想要的任何事件推送到 header
import {EventEmitter, Injectable} from '@angular/core';
import {Subject, Observable} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class HeaderManagerService {
private headerStatus = new Subject<any>();
constructor() {
}
changeHeader(showHeader: boolean, rightBtn: string | undefined, onRightBtn: EventEmitter<boolean> | undefined, onLeftBtn: EventEmitter<boolean> | undefined) {
this.headerStatus.next({showHeader, rightBtn, onRightBtn, onLeftBtn});
}
getHeaderStatus(): Observable<any> {
return this.headerStatus.asObservable();
}
}
and in your NavComponent在你的 NavComponent
protected onDestroy = new Subject<void>();
showHeader = true;
rightBtn: string | undefined;
onRightBtn: EventEmitter<boolean> | undefined;
onLeftBtn: EventEmitter<boolean> | undefined;
constructor(private headerManager: HeaderManagerService,
private router: Router) {
}
ngOnDestroy(): void {
this.onDestroy.next();
this.onDestroy.complete();
}
ngOnInit(): void {
this.router.events
.pipe(filter(navigation => navigation instanceof NavigationEnd))
.subscribe((s: any) => {
this.showHeader = true;
this.rightBtn = undefined;
this.onRightBtn = undefined;
this.onLeftBtn = undefined;
});
this.headerManager.getHeaderStatus()
.pipe(
skipWhile(val => !val),
takeUntil(this.onDestroy)
)
.subscribe(({showHeader, rightBtn, onRightBtn, onLeftBtn}) => {
this.showHeader = showHeader;
this.rightBtn = rightBtn;
this.onRightBtn = onRightBtn;
this.onLeftBtn = onLeftBtn;
});
}
in nav.component.html在 nav.component.html
<nav *ngIf="showHeader">
some header
</nav>
<nav *ngIf="!showHeader"> <!--or ignore this element-->
<div class="d-flex">
<button (click)="onLeftBtn?.emit(true)">back</button>
<div class="flex-grow-1"></div>
<div (click)="onRightBtn?.emit(true)" [innerHTML]="rightBtn ?? ''"></div>
</div>
</nav>
and push some change to header from your page并从您的页面推送一些更改到 header
constructor(private headerManager: HeaderManagerService) {
}
onLeftBtn = new EventEmitter<boolean>();
onRightBtn = new EventEmitter<boolean>();
ngOnInit(): void {
this.headerManager.changeHeader(false,
'<img class="word-arrow mb-4" src="assets/img/myimage.jpg">',
this.onRightBtn,
this.onLeftBtn);
this.onLeftBtn.subscribe((value) => {
console.log('onLeftBtn');
});
this.onRightBtn.subscribe((value) => {
console.log('onRightBtn');
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.