在模板组件AppComponent
中,根据值,变量this.loggedInService.isLoggedIn
在logIn()
和logout()
方法之间切换,在应用程序组件AppComponent
中,它们在服务LoggedinService
和服务中订阅了这些方法。根据方法,将变量的值更改为true或false。
同样在Guard的方法checkLogin (url: string)
中,我根据变量this.loggedInService.isLoggedIn
的值返回true或false
一切正常,但是当我重置页面时,我需要保留输入或输出按钮的值。如何执行呢?
AppComponent模板:
<li class="nav-item">
<a class="btn btn-outline-success"
[class.btn-outline-success]="!this.loggedInService.isLoggedIn"
[class.btn-outline-danger]="this.loggedInService.isLoggedIn"
(click)="this.loggedInService.isLoggedIn ? logout() : logIn()">
{{this.loggedInService.isLoggedIn ? 'Exit' : 'Enter'}}
</a>
</li>
AppComponent的代码:
export class AppComponent implements OnInit {
constructor(private loggedInService: LoggedinService,
private router: Router) {}
ngOnInit() {}
logIn(): void {
this.loggedInService.login().subscribe(() => {
if (this.loggedInService.isLoggedIn) {
let redirect = this.loggedInService.redirectUrl ? this.loggedInService.redirectUrl :
'/gallery';
this.router.navigate([redirect]);
}
});
}
logout(): void {
this.loggedInService.logout();
this.router.navigate(['/']);
}
}
LoggedinService:
export class LoggedinService implements OnInit{
isLoggedIn: boolean = false;
redirectUrl: string;
constructor() {}
ngOnInit() {}
login(): Observable<boolean> {
return of(true).pipe(
delay(100),
tap(val => this.isLoggedIn = true)
);
}
logout(): boolean {
return this.isLoggedIn = false;
}
}
AuthGuard:
export class AuthGuard implements CanActivate {
constructor(private loggedInService: LoggedinService) {
}
canActivate(next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean{
let url: string = state.url;
return this.checkLogin(url);
}
checkLogin(url: string): boolean {
if (this.loggedInService.isLoggedIn) {
return true;
} else {
this.loggedInService.redirectUrl = url;
return false;
}
}
}
AppRoutingModule
const appRoutes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'app-root'
}
];
GalleryRoutingModule
const galleryRoutes: Routes = [
{
path: 'gallery',
component: GalleryMainComponent,
canActivate: [AuthGuard],
children: [
{path: '', component: GalleryComponent,},
{path: 'add', component: GalleryAddComponent},
{path: ':id', component: GalleryItemComponent},
]
},
];
最佳答案
您可以将值保存在localStorage
中,也可以创建一个服务来处理集合并从localStorage获取值(推荐)
例
localStorage.setItem('login',state);
localStorage.getItem('login'); // string value
关于javascript - 重新加载页面后如何保存按钮的值?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52832322/