登录后隐藏侧边栏
Posted
技术标签:
【中文标题】登录后隐藏侧边栏【英文标题】:Hide side bar after login 【发布时间】:2021-08-12 12:51:47 【问题描述】:我想要一个响应式页面,当登录页面被加载时,它应该隐藏侧边栏并且登录页面应该跨越整个页面。用户登录后,它应该显示包含所有组件的侧栏。我用下面的代码尝试了几种方法。
app.component.html:
<div class="row">
<div *ngIf="isLoggedUser == 'true'" class="col-lg-3 col-md-3 col-sm-3">
<app-sidebar></app-sidebar>
</div>
<div class="col-lg-9 col-md-9 col-sm-9">
<router-outlet></router-outlet>
</div>
</div>
app.component.ts
import Component, OnInit, VERSION from '@angular/core';
@Component(
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
)
export class AppComponent implements OnInit
name = 'Angular ' + VERSION.major;
isLoggedUser: any;
ngOnInit()
this.isLoggedUser = sessionStorage.getItem('isLogged');
if (sessionStorage.getItem('isLogged') === 'true')
this.isLoggedUser = 'true';
else
this.isLoggedUser = 'false';
login.component.html
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" (click)="login()" class="btn btn-primary">Submit</button>
</form>
login.component.ts
import Component, OnInit from '@angular/core';
import Router, ActivatedRoute from '@angular/router';
@Component(
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
)
export class LoginComponent implements OnInit
isLoggedUser: any;
constructor(private router: Router)
ngOnInit()
sessionStorage.setItem('isLogged', 'false');
login()
this.isLoggedUser = sessionStorage.setItem('isLogged', 'true');
this.router.navigate(['/users']);
这里我试图在会话存储中存储一个变量,在用户登录之前,isLoggedUser 标志将为 false,因此不会显示侧边栏。一旦用户单击登录, isLoggedUser 将变为 true ,但在我重新加载页面之前不会显示侧栏。有人可以指导代码中的错误/错误是什么。并且页面对中小屏幕没有响应
StackBlitz(演示):stackblitz
【问题讨论】:
【参考方案1】:将登录方式从login.component.ts改成这个:
login()
this.isLoggedUser = 'true';
sessionStorage.setItem('isLogged', 'true');
this.router.navigate(['/users']);
注意:sessionStorage.setItem('isLogged', 'true');
不返回任何内容,因此 this.isLoggedUser
被设置为 undefined
我刚换了
this.isLoggedUser = sessionStorage.setItem('isLogged', 'true');
与
this.isLoggedUser = 'true';
sessionStorage.setItem('isLogged', 'true');
还需要共享变量isLoggedUser
,这样当您在登录组件中更新它时,它的值也会在应用组件中反映。
【讨论】:
那么如何检查 app.component.ts 中的侧边栏条件? @shivaji 查看如何通过服务here共享变量以上是关于登录后隐藏侧边栏的主要内容,如果未能解决你的问题,请参考以下文章