[英]How can I hide my Navigation Bar if the component is called on all my routes (Angular4)
我知道这个问题的变体已经被问过无数次了,但是我似乎无法解决我的问题。
所以我要建立一个会计站点,我的问题是我似乎无法隐藏登录页面的顶部导航栏,而仍将其保留在所有其他页面/路线上:
我在app.component.html中调用导航栏组件,因此它显示在我的所有页面上:
(app.component.html)
<app-navbar>
<router-outlet>
登录页面具有简单的身份验证,因为我仍在制作模板,最终,用户名和密码将来自后端数据库。
登录页面ts文件如下所示:
export class LoginComponent implements OnInit {
emailFormControl = new FormControl('', [Validators.required,
Validators.pattern(EMAIL_REGEX)]);
UserName = new FormControl('', [Validators.required]);
password = new FormControl('', [Validators.required]);
constructor(private router: Router) { }
ngOnInit() {
}
loginUser(e) {
e.preventDefault();
console.log(e);
const username = e.target.elements[0].value;
const password = e.target.elements[1].value;
if (username === 'admin' && password === 'admin') {
// this.user.setUserLoggedIn();
this.router.navigate(['accounts']);
}
}
}
我也有一个用户服务:
import { Injectable } from '@angular/core';
@Injectable()
export class UserService {
private isUserLoggedIn;
public username;
constructor() {
this.isUserLoggedIn = false;
}
setUserLoggedIn() {
this.isUserLoggedIn = true;
this.username = 'admin';
}
getUserLoggedIn() {
return this.isUserLoggedIn;
}
}
我已经看到了有关Auth之类的答案,但是我似乎无法围绕我的代码雕刻答案。
如何隐藏登录页面上的导航栏?
我将不胜感激。 谢谢
编辑
这是Dhyey要求的路由文件:
import {RouterModule, Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './Components/admin/admin.component';
import { AccountsComponent } from './Components/accounts/accounts.component';
import { MappingComponent } from './Components/mapping/mapping.component';
const appRoutes: Routes = [
{ path: '',
pathMatch: 'full',
redirectTo: 'login' },
{
path: 'login',
component: LoginComponent
},
{
path: 'admin',
component: AdminComponent
},
{
path: 'accounts',
component: AccountsComponent
},
{
path: 'mapping',
component: MappingComponent
},
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule {}
// export const routingComponents = [MappingComponent, AccountsComponent, AdminComponent, LoginComponent];
编辑2这是app.component.ts文件
import { Component } from '@angular/core';
import {FormControl} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { UserService } from './services/user.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
title = 'app';
myControl: FormControl = new FormControl();
}
您可以检查用户是否通过getUserLoggedIn
方法登录:
首先,您需要在app.component.ts
注入UserService
:
constructor(public userService: UserService ) { }
然后在您的html中:
<app-navbar *ngIf="userService.getUserLoggedIn()">
<router-outlet>
这样,仅当isUserLoggedIn
为true时,才会显示app-navbar
您还可以做的是让菜单进入应用程序组件(这不是问题),并使用路由条件显示或不显示它。
为此,angular提供了ActivatedRoute以从当前路由URL https://angular.io/api/router/ActivatedRoute获取信息。
使用构造函数:
constructor (private activatedRoute: ActivatedRoute / Route) {
this.currentPage = activatedRoute.url;
}
if (this.curentPage === 'admin') { this.displayMenu = false; }
<div class="menu" *ngIf="! displayMenu">...</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.